HTML編程之頁面滾動div固定效果的實現
阿新 • • 發佈：2018-09-17
nload 發布 獲得 應該 如何實現 ava 效果 留言 javascrip Jquery頁面滾動條向下拉到div的位置時，此div就固定在頂部，向上拉時返回原位置Div在網頁打開時固定在某個位置(不一定是網頁的最頂端)，當滾動條向下滾動時，頁面的頂部到達此div位置後，此div就固定在網頁的最頂部跟隨移動，當滾動條向上滾動時，頁面頂部高過此div原來的固定位置，此div就定在原位置不再跟隨滾動條移動(相當於返回原來的位置)。下面就來詳細分享一下源碼：
<head>
<head>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { var pos = $(‘#div1‘).offset();// offset() 獲得div1當前的位置，左上角坐標(x,y) $(window).scroll(function () { //滾動條滾動事件 if ($(this).scrollTop() > pos.top ) { $(‘#div1‘).css(‘width‘, ‘100px‘).css(‘top‘, $(this).scrollTop() - pos.top); } else if ($(this).scrollTop() <= pos.top ) { $(‘#div1‘).css(‘width‘, ‘100x‘).css(‘top‘,0).css(‘position‘, ‘relative‘); } }) };
</script>
</head>
<html>
<div id="div1" style="width:100px">
我就是要跟著滾動條移動的div.
</div></html>
好了，看到這裏大家應該清楚是如何實現的吧，如果還是存在不理解的地方或者不知道哪裏出錯了，都是可以留言來獲得幫助和解答。
本文由專業的鄭州app開發公司燚軒科技整理發布，原創不易，如需轉載請註明出處!
HTML編程之頁面滾動div固定效果的實現