html中 导航条置顶的代码,实现滚动到一定位置时，导航栏置顶的效果

html部分

1

2

1

2

• 1
• 2
• 3
• 4
• 5

css部分

.top{

width:100%;

height:50px;

background:green;

}

.top ul li{

list-style:none;

display:inline-block;

margin-right:100px;

line-height:50px;

}

a{

color:gray;

text-decoration:none;

}

/*动态使用 */

.navbar-fixed-top{

position:fixed;

top:0;

left:0;

}

js

$(function(){

var banOffTop=$(".top").offset().top;//获取到距离顶部的垂直距离

var scTop=0;//初始化垂直滚动的距离

$(document).scroll(function(){

scTop=$(this).scrollTop();//获取到滚动条拉动的距离

console.log(scTop);//查看滚动时，垂直方向上，滚动条滚动的距离

if(scTop>=banOffTop){

//核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式

$(".top").addClass("navbar-fixed-top");

}else{

$(".top").removeClass("navbar-fixed-top");

}

})

})

注意：如果css中设置的height:100%，则这个滚动无效果