向下滚动到div位置时，该div一直固定在页面的顶部向上滚动到div原有位置时，div又恢复到文档中的原位置吸顶灯是各站点常用的一个功能，它有两个特性引用块内容
div可能是一个“分类菜单”，也可能是一个“文章导航”。如
div初始居普通文档流中给window添加scroll事件（可事件节流），获取div的offset的top值（div容器距离网页最顶端的距离值），滚动时scrollTop值和top比较，当到达top时给div添加一个fixed的class使其固定向上滚动时当到达div初始top时则删除fixed的class，此时div又回到普通文档流中fixed样式非IE6浏览器使用position:fixed，IE6使用position:absolute和IE expression实现思路如下
<!DOCTYPE html><html><head><title>无限翻页测试+导航栏吸顶测试</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="///jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="///bootstrap/3.3.5/js/bootstrap.min.js"></script><style type="text/css">#spinner{position: fixed;top: 20px;left: 40%;display: block;color: red;font-weight: 900;background-color: rgba(80, 80, 90, 0.22);padding-top: 20px;padding-bottom: 20px;padding-left: 100px;padding-right: 100px;border-radius: 15px;}.topmenu{border:1px solid black;position:absolute;top:100px;left: 100px;width:100px;height: 100px;}.fixed {position: fixed;top: 0;left: 100px;z-index: 100;}</style></head><body><div style="position: relative"><div class="topmenu" style=""></div></div><div id="sample"></div><div id="spinner">正在加载</div><script type="text/javascript">var index = 0;function lowEnough(){var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);var viewportHeight = window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight || 0;var scrollHeight = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop || 0;// console.log(pageHeight);// console.log(viewportHeight);// console.log(scrollHeight);return pageHeight - viewportHeight - scrollHeight < 20;}function doSomething(){var htmlStr = "";for(var i=0;i<10;i++){htmlStr += "这是第"+index+"次加载<br>";}$('#sample').append(htmlStr);index++;pollScroll();//继续循环$('#spinner').hide();}function checkScroll(){if(!lowEnough()) return pollScroll();$('#spinner').show();setTimeout(doSomething,900);}function pollScroll(){setTimeout(checkScroll,1000);}function reset_topmenu_top(topmenu, topmenu_top) {var document_scroll_top = jQuery(document).scrollTop();if (document_scroll_top > topmenu_top) {topmenu.addClass("fixed");}if (document_scroll_top <= topmenu_top) {topmenu.removeClass("fixed");}}jQuery(document).ready(function() {var topmenu = jQuery(".topmenu");var topmenu_top = topmenu.offset().top;reset_topmenu_top(topmenu, topmenu_top);jQuery(window).scroll(function() {reset_topmenu_top(topmenu, topmenu_top);});checkScroll();});</script></body></html>
