JS实现屏幕滚动到一定位置时导航栏固顶

avatar
avatar
小王先森
386
文章
383
评论
2020年4月30日 评论 309

把网站的导航菜单固定在顶部,主要是查看栏目方便,也很流行。

1、css 代码

<style>
.fixDiv{
   position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:666;
}
</style>

2、js 代码

<script>
    $(function(){
	//获取到距离顶部的垂直距离
        var navOffTop=$(".nav").offset().top;
        //初始化垂直滚动的距离
		var scTop=0;
        $(document).scroll(function(){
	    //获取到滚动条拉动的距离
            scTop=$(this).scrollTop();
            //console.log(scTop);查看滚动时,垂直方向上,滚动条滚动的距离
            //核心:当滚动条拉动的距离大于等于导航栏距离顶部的距离时,添加指定的样式
	    if(scTop>=navOffTop){
                $(".nav").addClass("fixDiv");
            }else{
                $(".nav").removeClass("fixDiv");
            }
        })
    })
</script>
历史上的今天
四月
30
avatar
  • 本文由 发表于 2020年4月30日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: