1.css
<style type="text/css"> .elementFixed{ position: fixed; top:0; } </style>
2.body
<body> <input type="hidden" id="scroll_return" value = "">
</body>
3.script
<script type="text/javascript"> /** * 固定某一元素,当某一元素滚动到浏览器的顶部时,fixed固定 * firstDiv:第一个元素 * secondDiv:第二个元素 * firstDiv+secondDiv:因为fixed会脱离文档流,firstDiv是为了避免secondDiv的宽度变形的 */ function fixedDiv(firstDiv,secondDiv){ //定位元素距离浏览器顶部的距离 var fixedH = $("#firstId").offset().top; //添加window的滚动条事件 $(window).scroll(function(){ //滚动条的滑动距离 var scrollH = $(this).scrollTop(); //滚动条的滑动距离大于定位元素距离浏览器顶部的距离，就固定，反之就不固定 if(scrollH>fixedH){ //是否返回 var scroll_return = document.getElementById("scroll_return").value; //有值则返回 if("scroll_return"==scroll_return){ return true; } //console.log("固定,滚动距离:"+scrollH); $("#tableTbodyId").html(firstDiv+secondDiv); $("#tableTheadId").addClass("elementFixed"); //赋值返回,下次不继续添加 document.getElementById("scroll_return").value = "scroll_return"; } else { //console.log("不固定,滚动距离:"+scroH); $("#tableTbodyId").html(secondDiv); $("#tableTheadId").removeClass("elementFixed"); //清空滚动赋值 document.getElementById("scroll_return").value = ""; } }) } //清除滚动事件 $ (window).unbind ('scroll'); </script>