使用JQuery粘滯元素

我正在試圖做相反的經典粘滯元素。使用JQuery粘滯元素

請參閱http://imakewebthings.com/jquery-waypoints/sticky-elements/瞭解典型粘性體驗的示例。

我想要做的是，首先將一個元素與用戶窗口底部對齊，然後在向下滾動時停止並停靠在頁腳上。有沒有更好的方法來初始化這個插件，或使用另一個來完成這個？

$('#footer').waypoint(function(event, direction) { 
    $('#footer-content').toggleClass('sticky', direction === 'up'); 
}, { 
    offset: function() { 
     return $.waypoints('viewportHeight') - $(this).outerHeight(); 
    } 
});

我分配到.sticky最初#footer-content（HTML中）：

來源

2012-03-06 Wesley

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/可能是舊版鏈接的更新版本（現在插件已被重構爲不嚴格依賴jQuery，儘管Sticky快捷方式/擴展程序確實它似乎需要jQuery構建）。 – jinglesthula 2017-06-12 21:49:41

繼documentation，它可以如下實現。

參見fiddle。

來源

2012-03-06 20:01:39 ori

這個工程，直到我到達底部。然後，當我向後滾動時，頁腳不再粘住了。也許從小提琴中使用的庫的版本來看，這是一個有爭議的問題，但是如果其他人正在尋找類似的解決方案，那麼這個問題就會出現。 – jinglesthula 2017-06-12 22:29:02

下面是修復問題的小提琴的更新版本（並使用最新版本的庫+ Sticky快捷鍵）：http://jsfiddle.net/jinglesthula/68903kzc/ – jinglesthula 2017-06-12 22:53:18

您可以更改的CS爲.top類選擇

設置bottom : 0px，使其與屏幕的底部平齊目前該項目實際上是頁腳的一部分，所以它不會是一個簡單的功能添加使其停止滾動頁面上的某個點。

我想你將不得不在javascript中設置一個最大滾動高度變量，當你達到該滾動時，獲取元素的偏移量，將其位置更改爲絕對值，並將位置設置爲您保存的偏移量。如果它們低於最大滾動高度，則將位置更改爲固定。

來源

2012-03-06 20:03:43 Evan

使用JQuery粘滯元素

回答

相關問題