項目背景：

一天小虎找到龍哥說，龍哥你有沒有現成的JS板子，就是那種當頁面滾動到某個位置時，頁面中的某個元素則固定在頂部不在滾動，而小于這個位置之后這個元素又恢復到原來的狀態。

實現：這里做了一個簡單的實現，前提是不要考慮瀏覽器兼容了，如果你要考慮，就自己解決吧，對一個前端來說這應該不是什么難事。

接下來看源碼:

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .box{height:50px;background:#ccc;width:100%;} </style> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div class="box"><div class="info"></div></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <script type="text/javascript"> var oInfo = $(".info"); var oTop = $(".box").offset().top; var sTop = 0; $(window).scroll(function(){ sTop = $(this).scrollTop(); oInfo.text(sTop + '-' + oTop);//這一句 只是為了看看數據 沒有多大的用處 if(sTop >= oTop){ $(".box").css({"position":"fixed","top":"0"}); }else{ $(".box").css({"position":"static"}); } }); </script>

要知道，這里我引入了JQ庫，用提百度cdn的庫，考慮速度嘛，百度怎么也要強悍一些。現在你只需要拷貝代碼到你的HTML文件中就可以運行看到效果了，如果你顯示器的分辨率很大，就請在元素的下面再增加一些 br 吧，這樣就可以看到效果了。

總結

以上是生活随笔為你收集整理的JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。