jquery實(shí)現(xiàn)滾動(dòng)條到一定高度導(dǎo)航固定不變跟隨效果
jquery實(shí)現(xiàn)滾動(dòng)條到一定高度導(dǎo)航固定不變跟隨效果方法說明：
由頁面總高度減去已滾動(dòng)的高度再減去ID為widget的層的高度即等于該層底部距離底部的高度；當(dāng)距離底部的高度小于或等于特定位置距離底部的高度時(shí)，去掉樣式fixed，然后給該層添加絕對(duì)定位！
CSS中要給父父層添加position:relative;
方法一：
<script type="text/javascript">
var rollSet = $('#widget');
var offset = rollSet.offset();
var fwidth = $("#footer").height();
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
if (offset.top < scrollTop) {
if (scrollBtm > fwidth) {
rollSet.removeClass('absolute').addClass('fixed')
} else {
rollSet.removeClass('fixed').addClass('absolute')
}
} else {
rollSet.removeClass('fixed')
}
})
</script>
方法二：
<div class="one"></div>
.one {
width: 800px;
height: 100px;
background-color: yellow;
}.fix {
position: fixed;
left: 0;
top: 0;
background-color: pink;
}
$(function(){
var nav=$(".one"); //得到導(dǎo)航對(duì)象
var win=$(window); //得到窗口對(duì)象
var sc=$(document);//得到document文檔對(duì)象。
win.scroll(function(){
if(sc.scrollTop()>=600){
nav.addClass("fix");
}else{nav.removeClass("fix");
}});
});
方法三(建站常用代碼實(shí)例)：
<div id="navtop">頂部文字</div>
<div class="bgwhite marginb fixed" id="navBar">
導(dǎo)航
</div>
<div id="mainPart"></div>
<div>內(nèi)容</div>
<script type="text/javascript">
$(window).scroll(function(){
function e(){return{left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0}}
var r=$("#navtop"),o=$("#navBar");
if(0===r.length||0===o.length)return!0;
var a=e();
if(a.top>=r.height()){
o.removeClass("marginbs").addClass("fixed");
var s=a.top-r.height();s=s>66?66:s,s+=66,$("#mainPart").attr("style","padding-top: "+s+"px;")
}else{
o.removeClass("fixed").addClass("marginbs"),$("#mainPart").attr("style","padding-top: 0;")
}
})
</script>
如對(duì)本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
