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