玩代码

页面鼠标向下滚动,增加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到该段代码上边

龙Ge

龙Ge

前端•不会,后端•是啥

喜欢在深夜写一点没用的代码。

评论

0

发表评论

邮箱不会被公开。
验证码