jQuery固定浮動側邊欄實現思路及代碼，jquery思路

jQuery固定浮動側邊欄實現思路及代碼，jquery思路

這個功能現在應用的非常普遍，如果頁面比較高，當捲軸拖到頁面的下面的時候，側邊欄會出現一個固定跟隨瀏覽器的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');}});});

JS代碼（側邊欄浮動分享類似Jiathis）

直接在JiaThis網站複製就可以了啊，可以自訂裡面的一些屬性，你可以問下客服
 
html(js,jquery)實現伸縮側邊欄

發到你郵箱了，直接運行layout.html試試，看是不是你想要的效果，是的話，給分哦！