今天在改别的站的时候,想让导航在滑动到某个点位时置顶跟随,就是在鼠标向下滚动时,给某个指定的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到该段代码上边
龙哥 发表于 6个月前 (11-22),共586字
版权声明:①欢迎转载但请注明出处。②如涉及版权联系(izhailong#qq.com)删除!
转载请注明:页面鼠标向下滚动,增加addclass使导航跟随 || https://www.izhailong.com/548.html
本文由:版权声明:①欢迎转载但请注明出处。②如涉及版权联系(izhailong#qq.com)删除!
转载请注明:页面鼠标向下滚动,增加addclass使导航跟随 || https://www.izhailong.com/548.html
2 条评论
缙哥哥 ( VIP 3 )
好在我的主题自带了这个功能,不用折腾了,哈哈
龙哥
嗯嗯 这个东西还是要的