当高度大于100,为导航栏添加一个css
当高度小于100,为导航栏删去一个css
$(function(){
$(window).scroll(function () {
var scrollTop =$(this).scrollTop();//滚动高度
if(scrollTop > 100){
$("#mainNav").addClass("navbar-defaulte");
}
if(scrollTop < 100){
$("#mainNav").removeClass("navbar-defaulte")
}
});
});
$(function(){…}); --文档加载完成后执行函数。
//$(window).scrollTop()这个方法是当前滚动条滚动的距离
//$(window).height()获取当前窗体的高度
//$(document).height()获取当前文档的高度
下面列举下对css样式操作的方法:
1、.css("样式"):获得样式值,比如$("input").css("color") 获得input中字体的颜色
2、.css("样式","value"):为样式赋值,如$("input").css("color","red");
3、.addClass("样式类1,样式类2,样式类3"):可以添加多个定义好的样式类
4、.hasClass("样式类类"):判断是否存在该样式
5、.toggleClass("样式类"):如果存在(不存在)就切换(删除)样式
6、.toggleClass("样式类",swith):如果swith为false,则删除样式,如果swith为true,则切换成该类
7、removeClass("样式类"):移除样式类
8、.css({样式名:"value",样式名:"value",样式名:"value"}):可以多次添加样式