當頁面到達頁面底部時停止側邊欄滾動

我正在一個有側邊欄的網站上工作。側邊欄只會固定在滾動窗口上。當頁面到達頁面底部時停止側邊欄滾動

問題是，當我向下滾動窗口並觸及頁面底部時，由於側邊欄被固定，側欄會重疊頁腳。

我想，當用戶到達頁面的底部時，邊欄停止滾動，如果用戶正在滾動頁面的頂部，它應該開始再次滾動。

您可以在下面檢查我的代碼，或者您可以查看fiddle here。

SCRIPT

<script> 
$(window).scroll(function(){ 

     var contPos = $('.sidebar').offset().top;  

     var containerHeight = $('.container').height(); 

     var heightOfWindow = $('body').height();    
     var topOfWindow = $(window).scrollTop(); 

      if (contPos < topOfWindow) { 
       $('.sidebar').css('margin-top',''+topOfWindow+'px'); 

      } 
    }); 


</script>

HTML

<div class="header">Header</div> 
<div class="sidebar">asd</div> 
<div class="container">Contaier</div> 
<div class="footer">Footer</div>

CSS

.header{height:100px; text-align:center; font-size:35px; color:#000; background:#999;} 
.container{overflow:auto; padding:15px; background:#CCC; height:1000px; margin:0 0 0 300px;} 
.sidebar{width:300px; height:700px; float:left; background:red;} 
.footer{height:100px; text-align:center; font-size:35px; color:#000; background:#999;}

來源

2014-07-17 Kamal

爲什麼這樣做使用JavaScript？它看起來像我想像你想使用類似'position：fixed'的側邊欄 –

「邊欄停止滾動，如果用戶滾動頁面頂部，它應該開始滾動再次」 - 如果它滾動然後做什麼你的意思是「固定」..？你在哪裏嘗試創建類似[this]（http://jsfiddle.net/GsKJh/1/）？我沒有得到你想要做的。 –

當用戶觸及頁面底部時，我希望側欄不會超過頁腳...並且當用戶從頁面底部滾動到頁面頂部時，側欄應該開始浮動。 – Kamal

我想你必須寫一個JS代碼來檢測邊欄是在頁面的頂部，底部還是中間。然後你可以設置一個特定的CSS類「底部」，「頂部」，並設置在fixed/absolute之間的正確位置。

這裏是我會做：

http://jsfiddle.net/w6G7Z/1/

來源

2014-07-17 09:11:28 Tacos

如果容器的尺寸不是固定的，則不能使用 – Gal

在這種情況下，最初的問題可以是

.sidebar{ 
    width:300px; 
    height:700px; 
    float:left; 
    background:red; 
    position:absolute; 
}

的javascript：通過給定邊欄的CSS類position:absolute並設置top屬性，而不是margin-top

CSS固定很容易

if (contPos < topOfWindow) 
{ 
    $('.sidebar').css('top',topOfWindow+'px'); 
}

看到小提琴here

你仍然會滾動備份時遇到問題。

來源

2014-07-17 07:54:39

感謝您的幫助我希望當用戶觸及頁面底部時，側邊欄不會超過頁腳...並且當用戶從底部到頂部滾動頁面時，側邊欄應該開始浮動。 – Kamal

當頁面到達頁面底部時停止側邊欄滾動

回答

相關問題