制作stick侧边栏导航效果

其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看:

分析:

从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=150px区域内,

 当鼠标滚动到第2个区域时,同理,右边的top,应该在第2个框的top+height内 ,这样思路理清了,那么接下来我们来实现吧。
<nav class="sidebar">
        <ul>
            <li>F1-植物王国</li>
            <li>F2-动物世界</li>
            <li>F3-科学探秘</li>
            <li>F4-文化节日</li>
            <li>F5-成长健康</li>
            <li>F6-生活百科</li>
            <li>F7-艺术欣赏</li>
            <li>F8-语言乐园</li>
            <li>F9-数学小天地</li>
        </ul>
    </nav>
/*侧边栏开始*/
.sidebar {
    border: 1px solid #E5E9EF;
    position: fixed;
    width: 100px;
    right: 12%;
    top: 45%;
    border-radius: 4px;
}

.sidebar>ul {
    
}

.sidebar>ul>li {
    padding: 10px;
    width: 100px;
    cursor: pointer;
}

.sidebar .active {
    background-color: #06A3D7;
    color: #fff;
}
/*侧边栏结束*/
$(window).scroll(function() {
        //这里是要显示的div的id,一定要按照从上到下的顺序排列,如果有新的可以往后加
        var tops = [ 'f1', 'f2', 'f3', 'f4' ];
        for (var i = 0; i < tops.length; i++) {
            var top = $('.sidebar ul li').eq(i).offset().top;
            var t = $('#' + tops[i]).offset().top;
            var h = $('#' + tops[i]).height();
            if (top > t && top < t + h) {
                $('.sidebar ul li').removeClass('active');
                $('.sidebar ul li').eq(i).addClass('active');
            }
            if (top < t && i == 0) {
                $('.sidebar ul li').removeClass('active');
            }
        }
    });

 

效果图:

总结:

1、刚开始做的时候没有思绪,然后一个朋友给了一段自己写的代码,我就参考一下然后自己优化了一下它的代码

2、默认在页面最上面应该不显示active状态,所以第2个if判断至关重要!!!

参考:

http://www.bootcss.com/p/stickup/

 

 

===========================================分割线=========================================================

上面是依据sidebar来判断div的,也就是说当div和sidebar同处同一水平线,那么导航就高亮,现在我参照bilibili的网站,它的是当div在屏幕可见区域1/4位置时导航就高亮,所以代码改成:

$(document).on('scroll', function() {
        var height = $(window).height();
        var tops = [ 'f1', 'f2', 'f3', 'f4' ];
        for (var i = 0; i < tops.length; i++) {
            var rectop = $('#' + tops[i])[0].getBoundingClientRect().top;
            console.log('rectop=' + rectop)
            if (rectop < height /4) {
                $('.sidebar ul li').removeClass('active');
                $('.sidebar ul li').eq(i).addClass('active');
            } else if (i == 0) {
                $('.sidebar ul li').removeClass('active');
            }
        }
    });

    $(".sidebar ul li").click(function(e) {
        var index = $(this).index();
        var height = $(window).height();
        $("html,body").animate({
            scrollTop : $('#f' + (parseInt(index) + 1)).offset().top
        }, 500);
    });
    $(".sidebar a").click(function(e) {
        $("html,body").animate({
            scrollTop : $('body').offset().top
        }, 500);
    });

 总结:这样虽然完成了,但是最后一个div如果没有达到屏幕可见区域的1/4位置,那么导航就不高亮,bilibili的做法是,直接去掉最后一个导航,而我的做法是最后div的margin-bottom设置成200px,那就会“撑”到1/4位置了。

参考:http://www.bilibili.com/

posted @ 2016-09-06 15:35 承影剑 阅读(...) 评论(...) 编辑 收藏