Question

我有一个带代码的侧边栏

 <section>
   <div class="8u">
   </div>
   <div class="4u">
      <div id="sidebar"> 
        <div id="scroller-anchor"></div> 
          <div id="scroller" style="margin-top:10px; width:270px"> 
            Content Here
          </div>
        </div>
       </div>
    </div>
     </section>
     <footer>Content Footer</footer>

我的问题是，当我滚动屏幕时，侧边栏会平滑滚动，但当侧边栏到达页脚时，侧边栏会重叠页脚内容。 I want that sidebar should remain at last position when footer start is reached.

滚动侧边栏的我的JQuery代码是：

   //<![CDATA[ 
     $(window).load(function(){
       $(function() {
      var a = function() {
      var b = $(window).scrollTop();
      var d = $("#scroller-anchor").offset().top;
      var c=$("#scroller");
    if (b>d) {
       c.css({position:"fixed",top:"50px"})
     } else {
      if (b<=d) {
       c.css({position:"relative",top:""})
      }
     }
    };
    $(window).scroll(a);a()
  });
  });//]]>

请在这里帮忙。链接到我的JS Fiddle

Answer 1

不使用fixed，保持绝对，并使用scrolltop作为#sidebar的顶部坐标（或添加到它）：

SEE FIDDLE HERE

**已编辑**使用$（“＃scroller”）。height（）而不是$（“＃sidebar”）。height（）

//<![CDATA[ 

$(function () {

    var a = function () {
        var b = $(window).scrollTop();
        var d = $("#scroller-anchor").offset().top;
        var f = $("#footer").offset().top;
        var c = $("#scroller");
        var h = $("#scroller").height() + 20; // margin

        if (b > d) {
            var myTop = $(window).scrollTop();
            if (myTop > f - h) myTop = f - h;
            c.css({
                position: "absolute",
                top: myTop,
                bottom: ""
            })
        } else {
            if (b <= d) {
                c.css({
                    position: "absolute",
                    top: "",
                    bottom: ""
                })
            }
        }
    };
    $(window).scroll(a);
    a()

}); //]]>

这样，如果您手动设置垂直位置（而不是将其保持为“固定”），您可以将其与页面中的其他元素进行比较，并以您希望的任何方式进行更改。

Answer 2

这可以使用CSS

完成

将此样式添加到侧边栏ID

#sidebar{height:400px; overflow-y:auto;}

根据侧边栏的内容调整高度

防止滚动侧栏与页脚重叠

2 个答案: