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

玩代码  1周前 (11-22)     30    本文共计586个字,预计阅读时长2分钟。  
今天在改别的站的时候,想让导航在滑动到某个点位时置顶跟随,就是在鼠标向下滚动时,给某个指定的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到该段代码上边

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

暂无评论

暂无评论...