使div的行爲就像一個粘滯滾動時達到某些div

Question

我有一個div元素包含動態文本多達詞（10至250）。現在我必須使另一個div行爲像粘滯當用戶到達按鈕包含純文本的第一個div。下面是我如何嘗試到目前爲止。

<div></div> //which contains plain text , stick to be available once user scroll to end of this. 
    <div class="scroller_anchor"></div> // sticky to become when user reached to this div. 
    <div> </div> // which one to behaves like sticky. 
    //Here is code 
    if(($(document).scrollTop() <$(".scroller_anchor").offset().top )){ 
    $('.scroller_anchor').css('height', '0px'); 
    $('.scroller').css({ 
     'position': 'relative' 
    }); 


    }else if ($(document).scrollTop() > ($(".scroller_anchor").offset().top)){ 
     $('.scroller').css({ 
      'position': 'fixed', 
      'top': '0px' 
     }); 
     $('.scroller_anchor').css('height', '50px'); 

    } 

有了這個一切工作除了，格變成只有在用戶滾動下面的東西粘冷杉罰款div.If我使用$(document).scrollTop() <$(".scroller_anchor").offset().top -100它適用於一些文本（說高達75個字）。如何使這個factor (-100 , -220)等動態。

Answer 1

計算scrollHeight其行爲就像你的情況下的一個因素，這裏是如何計算。

var scrollHeight = window.innerHeight * (window.innerHeight/document.body.offsetHeight); 

不同的瀏覽器行爲稍有不同。用scrollHeight代替100。威爾可能會工作。