页面鼠标向下滚动，增加addclass使导航跟随

今天在改别的站的时候，想让导航在滑动到某个点位时置顶跟随，就是在鼠标向下滚动时，给某个指定的id里增加一个css(这里的跟随是用到fixed，不能直接添加到css，因为要实现鼠标滚动到某一个指定点才触发跟随)，向上滚动式去掉，从而实现导航或者别的需要显示的模块跟随，或者也可以改为别的效果，做个记录，上代码

一、js（这个是必须的），放在header上边

<script>
$(document).ready(function () {
    $(window).on('scroll', function () {
        var t = $(window).scrollTop();
        if (t > 10) {
            $("#menu-nav").addClass("menu-fixed");
        } else {
            $("#menu-nav").removeClass("menu-fixed");
        }
    })
});
</script>

二、css（这里用到的是fixed跟随，也可以举一反三到其他）

<style>
.menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: rgba(216, 214, 176, 0.9) !important;
}
</style>

需要注意的是，这个代码要基于jquery.js实现，如果没有，请引入jquery到该段代码上边

css Js

本文由：龙哥发表于 6个月前 (11-22)，共586字
版权声明：①欢迎转载但请注明出处。②如涉及版权联系（izhailong#qq.com）删除！
转载请注明：页面鼠标向下滚动，增加addclass使导航跟随 || https://www.izhailong.com/548.html