防止滚动侧边栏与页脚

重叠，我有一个侧边栏的代码防止滚动侧边栏与页脚

<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

来源

2014-04-25 Gags

建立一个[小提琴]（http://jsfiddle.net），它会帮助我们得到更好的答案 – Matheus

你的CSS在哪里？这就是你应该控制'#scroller {overflow-y：scroll;}'。这与你的页脚不应该有任何关系。你有滚动整个'部分'？ – PHPglue

overflow-y：scroll如何防止重叠。 – Gags

而是调整使用固定的高度来完成，保持绝对的，使用scrolltop作为#sidebar的顶部坐标（或添加到它）：

SEE FIDDLE HERE

** ** EDITED使用$（ “＃滚动”）。高度（）而不是$（ “＃侧边栏”）。高度（）

//<![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() 

}); //]]>

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

来源

2014-04-26 09:23:32 FrancescoMM

@ FrancescoMM ....感谢您的解决方案。它在小提琴bt上不在网站上。你能帮忙吗？侧边栏甚至重叠页脚的一半 – Gags

请注意，我将var h保留在a（）函数之外，因为如果在第一个循环中除了第一个循环外，其中的内容为0。侧边栏的垂直位置是否正常，除了页脚或页面未对齐（太高？）？ – FrancescoMM

是的..侧栏的垂直位置是可以的..它没有错位.. – Gags

这可以通过使用CSS

添加这种风格侧边栏的ID

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

根据侧边栏的内容

来源

2014-04-25 21:24:36 user1974500

一旦你将添加此风格。如果侧栏的高度超过您提供的固定高度，它将只在侧栏上添加滚动。 – user1974500

我想你误解了这个问题。 –

@ user1974500 ..这不是问题.. PL了解并回答 – Gags

防止滚动侧边栏与页脚

回答

相关问题