<!DOCTYPE html><html> ?<head> ???<meta charset="UTF-8"> ???<title>js滚动到指定位置导航栏固定顶部</title> ???<style type="text/css"> ??????body{height: 2500px; margin: 0; padding: 0;} ?????.banner{height: 250px; width: 100%; background: #e5e5e5;} ?????.bignav{width: 100%; background: #000;} ?????.nav{ background:#000; width: 1200px; margin: 0 auto; height: 45px;} ?????.nav a{display: block; width: 200px;float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px;} ???</style> ?</head> ?<body> ???<div class="banner"> ???</div> ???<div class="bignav" id="bignav"> ?????<div class="nav"> ???????<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> ???????<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> ???????<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> ???????<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> ???????<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> ???????<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> ?????</div> ???</div> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<p>其他内容</p> ???<script type="text/javascript"> ?????window.onscroll=function(){ ???????var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离 ???????var bignav = document.getElementById("bignav");//获取到导航栏id ???????if(topScroll > 250){ //当滚动距离大于250px时执行下面的东西 ?????????bignav.style.position = ‘fixed‘; ?????????bignav.style.top = ‘0‘; ?????????bignav.style.zIndex = ‘9999‘; ???????}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; ????} ????</script> ?</body></html>js滚动到指定位置导航栏固定顶部
原文地址：http://www.cnblogs.com/liyuhuan/p/7779626.html