您现在的位置: 365建站网 > 365学习 > jquery实现滚动条到一定高度导航固定不变跟随效果

jquery实现滚动条到一定高度导航固定不变跟随效果

文章来源:365jz.com     点击数:555    更新时间:2018-03-23 23:37   参与评论

jQuery实现滚动条到一定高度导航固定不变跟随效果方法说明:

由页面总高度减去已滚动的高度再减去ID为widget的层的高度即等于该层底部距离底部的高度;
当距离底部的高度小于或等于特定位置距离底部的高度时,去掉样式fixed,然后给该层添加绝对定位!
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"); //得到导航对象

var win=$(window); //得到窗口对象

var sc=$(document);//得到document文档对象。

win.scroll(function(){

if(sc.scrollTop()>=600){

nav.addClass("fix");
}else{

nav.removeClass("fix");
}

});
});

方法三(建站常用代码实例):

 <div id="navtop">顶部文字</div>

<div class="bgwhite marginb fixed" id="navBar">
导航
</div>
<div id="mainPart"></div>
<div>内容</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>


 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (555人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------