這個功能現(xiàn)在應用的非常普遍，如果頁面比較高，當滾動條拖到頁面的下面的時候，側(cè)邊欄會出現(xiàn)一個固定跟隨瀏覽器的DIV框，現(xiàn)思路是這樣的：首先獲取需要跟隨的DIV距離頁面頂部的距離，然后判斷，當瀏覽器滾動的距離大于該DIV本身距離頂部距離的時候，則添加CSS屬性fixed即可。

代碼如下:

HTML代碼：

?123456 <div id="header">header</div> <div id="sidebarWrap"> <div id="sidebar">Sidebar</div> </div> <div id="main">Main</div> <div id="footer">footer</div>

CSS代碼：

?1234567891011121314151617181920212223242526272829303132333435363738394041424344 body { margin: 10px auto; font-family: sans-serif; width: 500px; } div { border-radius: 5px; box-shadow: 1px 2px 5px rgba(0,0,0,0.3); border: 1px solid #ccc; padding: 5px; } #sidebarWrap { height: 400px; width: 210px; float: right; position: relative; box-shadow: none; border: none; margin: 0; padding: 0; } #main { width: 270px; height: 4000px; } #footer { clear: both; margin: 10px 0; } #sidebar { width: 200px; height: 300px; position: absolute; } #header { height: 200px; margin-bottom: 10px; } #sidebar.fixed { position: fixed; top: 0; } #footer { height: 600px; } #footer { height: 600px; }

JavaScript代碼：

?12345678910111213141516171819202122 $(function() { var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0)); var maxY = footTop - $('#sidebar').outerHeight(); $(window).scroll(function(evt) { var y = $(this).scrollTop(); if (y > top) { if (y < maxY) { $('#sidebar').addClass('fixed').removeAttr('style'); } else { $('#sidebar').removeClass('fixed').css({ position: 'absolute', top: (maxY - top) + 'px'}); } } else { $('#sidebar').removeClass('fixed'); } }); });

更多信息請查看IT技術(shù)專欄