防止滾動側邊欄與頁腳

重疊，我有一個側邊欄的代碼防止滾動側邊欄與頁腳

<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

防止滾動側邊欄與頁腳

回答

相關問題