自由屋推书网—热门的小说推荐平台!

你的位置: 首页 > wordpress分享

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

2022-01-11 10:16:33

今天在改别的站的时候,想让导航在滑动到某个点位时置顶跟随,就是在鼠标向下滚动时,给某个指定的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到该段代码上边。

编辑推荐

热门小说