实例
window.onscroll=function(){
var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
var bignav = document.getElementById("navbar");//获取到导航栏id
if(topScroll > 250){ //当滚动距离大于250px时执行下面的东西
bignav.style.position = 'fixed';
bignav.style.top = '0';
//bignav.style.zIndex = '-1';
}else{//当滚动距离小于250的时候执行下面的内容,也就是让导航栏恢复原状
bignav.style.position = 'static';
}
}
/*解决浏览器兼容问题*/
function get_scrollTop_of_body(){
var scrollTop;
if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离
scrollTop = window.pageYOffset;
}else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
}else if(typeof document.body != 'undefined'){
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
写得很详细,就不做描述了。其中本例250是指页面滚动往下并且距离超过250px时,执行该段代码。立即执行改为0即可。
资料
- 引用webxy