背景：页面列表底部存在一些操作按钮，列表太长时候超过了显示器高度，需要滚动列表到最底部才能看到这些按钮进行操作
需求：列表没超过屏幕高度时候，这些按钮处于列表底部30px处，列表超出屏幕高度时候，这些按钮距离屏幕底部0px处，跟随页面滚动。
下图红色箭头所示这个按钮区域为正常显示状态
页面网上滚动效果如下
Html
CSS
/*块跟随*/ .list-bottom{ position: fixed; bottom: 20px; width: 1000px; box-shadow: 0px 0px 13px 1px rgba(51,51,51,0.1); }
JS
//模块跟随 $(".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"}); } }); });