2017-09-13 82 views
0

我有一个div元素包含动态文本多达词(10至250)。现在我必须使另一个div行为像粘滞当用户到达按钮包含纯文本的第一个div。下面是我如何尝试到目前为止。使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)等动态。

回答

0

计算scrollHeight其行为就像你的情况下的一个因素,这里是如何计算。

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

不同的浏览器行为稍有不同。用scrollHeight代替100。威尔可能会工作。