制作stick侧边栏导航效果

2022-04-13 07:09:17

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

分析：

从图中我们可以看出：右边的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/

码农公寓

相关文章