這個功能現在應用的非常普遍，如果頁面比較高，當滾動條拖到頁面的下面的時候，側邊欄會出現一個固定跟隨瀏覽器的DIV框，現思路是這樣的：首先獲取需要跟隨的DIV距離頁面頂部的距離，然后判斷，當瀏覽器滾動的距離大于該DIV本身距離頂部距離的時候，則添加CSS屬性fixed即可。
代碼如下
HTML代碼：
<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代碼：
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代碼：
$(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');}});});新聞熱點
疑難解答
