js实现页面上下滚动跟随块

背景：页面列表底部存在一些操作按钮，列表太长时候超过了显示器高度，需要滚动列表到最底部才能看到这些按钮进行操作

需求：列表没超过屏幕高度时候，这些按钮处于列表底部30px处，列表超出屏幕高度时候，这些按钮距离屏幕底部0px处，跟随页面滚动。

下图红色箭头所示这个按钮区域为正常显示状态

js实现页面上下滚动跟随块

页面网上滚动效果如下

js实现页面上下滚动跟随块

Html

js实现页面上下滚动跟随块

CSS

/*块跟随*/
.list-bottom{
   position: fixed;
   bottom: 20px;
   width: 1000px;
   box-shadow: 0px 0px 13px 1px rgba(51,51,51,0.1);
}

//模块跟随
$(".fixed").height('100%');
$(".list-bottom").width($(".content-r").width());
$(".list-bottom").css({"position":"fixed","bottom":"0"});
if($(".content-r").height()<1024){
    $(".content-r").attr("style","min-height:1035px");
}
$(function() {
    ks = $(window).height();
    mh = $(document).height();
    fh = $(".fixed").height();
    t = $(".fixed").offset().top;
    bl = $(".list-bottom").offset().top;
    trh = $(".content-r").height()-750;
    $(window).scroll(function(){
        s = $(document).scrollTop();
        bt = $("#footer").offset().top-s;
        ht = $(".list-bottom").offset().top-s;
        rb = $(".content-r").height()-s;
        if(s>t){
            $(".fixed").css({"position":"fixed","top":"0"});
            if(bt<510){
                $(".fixed").css({"position":"fixed","top":"auto","bottom":"510px"});
            }
        }else{
            $(".fixed").css({"position":"absolute","top":"0"});
            $(".fixed").css('top',$(".user-info").height()+172);

        }
        if(s>trh){
            $(".list-bottom").css({"position":"relative"});
        }else{
            $(".list-bottom").css({"position":"fixed"});
        }

        var wh = $(window).height(),
            ot = $(".list-bottom").offset().top,
            ds =  $(document.documentElement).scrollTop();
        icoimg_h = $(".list-bottom").height();//是标签高度

        bh = wh - icoimg_h - [ot -ds ];

        if(bh>0){
            $(".list-bottom").css({"position":"relative"});
        }else{
            $(".list-bottom").css({"position":"fixed"});
        }
    });

});

js实现页面上下滚动跟随块

相关推荐