快捷導(dǎo)航

jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼

更新時(shí)間：2014年09月28日 18:02:18 投稿：whsnow

如果頁(yè)面比較高，當(dāng)滾動(dòng)條拖到頁(yè)面的下面的時(shí)候，側(cè)邊欄會(huì)出現(xiàn)一個(gè)固定跟隨瀏覽器的DIV框，下面將思路及具體實(shí)現(xiàn)與大家分享下

這個(gè)功能現(xiàn)在應(yīng)用的非常普遍，如果頁(yè)面比較高，當(dāng)滾動(dòng)條拖到頁(yè)面的下面的時(shí)候，側(cè)邊欄會(huì)出現(xiàn)一個(gè)固定跟隨瀏覽器的DIV框，現(xiàn)思路是這樣的：首先獲取需要跟隨的DIV距離頁(yè)面頂部的距離，然后判斷，當(dāng)瀏覽器滾動(dòng)的距離大于該DIV本身距離頂部距離的時(shí)候，則添加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');
}
});
});

您可能感興趣的文章:

相關(guān)文章

jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法,需要的朋友可以參考下。
2010-12-12
jquery項(xiàng)目中如何防重復(fù)提交詳解
客戶端的抖動(dòng),快速操作,網(wǎng)絡(luò)通信或者服務(wù)器響應(yīng)慢,都容易造成服務(wù)器重復(fù)處理,這篇文章主要給大家介紹了關(guān)于jquery項(xiàng)目中如何防重復(fù)提交的相關(guān)資料,需要的朋友可以參考下
2021-11-11
JavaScript?Canvas實(shí)現(xiàn)高清繪制效果
在我們?nèi)粘＠L制canvas的時(shí)候都不可避免的遇到一個(gè)問題，那就是canvas繪制出來(lái)的東西可能會(huì)有模糊，所以本文為大家準(zhǔn)備了解決canvas繪制模糊的方法，希望對(duì)大家有所幫助
2023-06-06
淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格
下面小編就為大家?guī)?lái)一篇淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片
本文給大家分享的是使用jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片特效，十分的炫酷，有需要的小伙伴可以參考下
2015-06-06
jQuery選中select控件無(wú)法設(shè)置selected的解決方法
select 控件的 option用jQuery動(dòng)態(tài)添加，然后選中某項(xiàng)時(shí)，IE6不能執(zhí)行（火狐沒問題），用try{}catch(err){alert(err.description);}提示為“無(wú)法設(shè)置selected屬性未指明的錯(cuò)誤”
2010-09-09
jQuery驗(yàn)證插件validate使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery驗(yàn)證插件validate使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
jquery——九宮格大轉(zhuǎn)盤抽獎(jiǎng)實(shí)例
本篇文章主要介紹了jquery——九宮格大轉(zhuǎn)盤抽獎(jiǎng)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
jquery中的$(document).ready()使用小結(jié)
本篇文章主要是對(duì)jquery中的$(document).ready()使用方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)
下面小編就為大家?guī)?lái)一篇JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09