將元素保留在特定的偏移處，然後釋放1000px後滾動

我試圖做一些我認爲與視差或粘性庫有關的問題，但有一堆麻煩。將元素保留在特定的偏移處，然後釋放1000px後滾動

我想讓用戶正常滾動，然後當一個特定的div是一個特定的值（讓我們說232px）從屏幕的頂部，我想要保持元素就位（即給它的位置：固定）。這部分是容易得到彌補：

$('element')product1[0].getBoundingClientRect().top;

然後，讓用戶繼續與元素滾動到位，使他們可以看到後臺繼續與滾動（我有一個大的高度的背景與動漂亮的線性漸變）。

然後在用戶滾動大約1000px後，我想釋放元素並讓它繼續向上滾動。當用戶滾動備份時會發生同樣的情況 - 它會保留一段時間然後釋放。

我試過了一堆不同的東西和庫的組合，純CSS，JS等沒有什麼效果。一切都有問題。很想看到一個乾淨的解決方案。

事情我已經嘗試： -JQuery粘庫（無法找到一個沒有或者是定製的，以我所需要的） -Vanilla JS跟蹤位置（對釋放的跳躍問題 - 元素將遠走高飛上發佈，而不是從釋放位置繼續） -CSS，特別是translateZ

理想的設置是：

<div style="height: 230vh; background: linear-gradient(coolOne)"> 
    <div class="containerToStickTemporarily"> 
     <p class="textOnLeft">Hi</p> 
     <img src="myImage.png"/> 
    </div> 
</div>

我想有這些多一排。

來源

2017-06-15 Adam Moisa

你檢查了航點？ http://imakewebthings.com/waypoints/ – mjw

看看這個https://stackoverflow.com/questions/44574995/div-positions-while-page-scroll/44575061# –

@mjw我提到我能夠完成這在香草，但有其他視覺問題釋放和跟蹤是否低於和高於。如果你能想出堅實的邏輯，不會在發行版上搞亂視覺效果（有或沒有這個lib），請讓我知道！ –

類似的東西。我猜

$(window).scroll(function(){ 
    var top = $(window).scrollTop(); 

    $('element').css({ position: top > 230 && top < 1000 ? 'fixed' : 'relative' }); 
})

來源

2017-06-15 21:21:20 ymz

將元素保留在特定的偏移處，然後釋放1000px後滾動

回答

相關問題