停止浮動邊欄一旦到達頁腳。 jQuery Waypoints

我正在使用this jQuery waypoints plugin來浮動我的邊欄。一切工作，因爲它應該，但我需要在頁腳上設置一個額外的航點，以便邊欄不滾動上面，不幸的是我不知道如何編寫jQuery代碼。停止浮動邊欄一旦到達頁腳。 jQuery Waypoints

I setup a quick jsfiddle，但請耐心等待，因爲這是我第一次使用jsfiddle。

任何幫助將不勝感激，因爲我堅持如何做到這一點。

下面是我使用的是當前的jQuery代碼：

<script> 
    $(document).ready(function() { 
     $('.sidebar').waypoint('sticky', { 
      offset: 264 // Apply "stuck" class when element 264px from top 
     });; 
    }); 
</script>

來源

2013-01-31 Steven Jones

你可以在這裏看到現場工作的例子，http://staging.alcoholrehab-florida.com/alcohol-rehab-programs-test.html –

如果你想做到這一點，無需外部插件：http://stackoverflow.com/a/11971912/1428241 –

感謝您的迴應，但這並沒有幫助我的側邊欄滾動頁腳重疊的問題。我假設我需要爲頁腳設置一個額外的航點，以觸發側欄類改回相對而不是固定的。我只是不知道如何編碼/合併。 –

你並不需要使用插件，您可以輕鬆地做到這一點你自己。只需調整變量。

Updated: Here is working jsFiddle.

$(window).scroll(function() { 
    var scrollVal = $(this).scrollTop(); 
    if (scrollVal >= 0 && scrollVal < 260) { 
     //between 0 and navigation 

     $('.sidebar').removeClass('stuck').css({'margin-top':'0px'});; 
     $('.content').css({'margin-left':'0px'}); 
    }else if (scrollVal > 260 && scrollVal < 800) { 
     //between navigation and footer 

     $('.sidebar').addClass('stuck').css({'margin-top':'0px'});; 
     $('.content').css({'margin-left':'100px'}); 
    }else if (scrollVal > 800) { 
     //beyond footer 

     $('.sidebar').removeClass('stuck').css({'margin-top':'540px'}); 
     $('.content').css({'margin-left':'0px'}); 
    } 
});

來源

2013-01-31 19:27:52

我明白，但我想達到的目的是在頁腳到達時停止修復側邊欄。如果您現在查看它，一旦用戶向下滾動足夠遠，側欄會重疊頁腳。 –

@StevenJones回答更新。 –

太棒了。現在我可以問你爲什麼選擇800的滾動值？如果內容div沒有固定的高度，我認爲這不起作用，而不是正確的？計算窗口高度並減去頁腳高度不是最好的嗎？我不熟悉jQuery，所以我不確定這個邏輯是否正確。 –

停止浮動邊欄一旦到達頁腳。 jQuery Waypoints

回答

相關問題