滚动时添加offset()。top amount

时间:2017-09-29 18:58:11

标签: javascript jquery scroll offset

我有一段固定的文本,每次文本在滚动条上输入div时我都会尝试添加不同的类。我的工作没有问题。但是,如果我向固定文本添加偏移量,例如

top: 400px

我需要在JS中反击这个偏移量。但我似乎无法弄明白。我尝试过使用:

.offset().top 400);

但它不起作用。这是我正在使用的代码:

HTML

<p class="text">TEXT HERE</p>

<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>

JS

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   $('.text').toggleClass('blue',
      scroll >= $('.section1').offset().top
   );
   $('.text').toggleClass('magenta',
     scroll >= $('.section2').offset().top
   );
   $('.text').toggleClass('green',
     scroll >= $('.section3').offset().top
   );
   $('.text').toggleClass('orange',
     scroll >= $('.section4').offset().top
   );
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed

文本需要在进入相关div时立即添加类。

这是一个工作小提琴:http://jsfiddle.net/6PrQW/334/

2 个答案:

答案 0 :(得分:1)

所以你做的一切都很正确,但我认为你出错的地方是:var scroll = $(window).scrollTop();

您不想使用窗口偏移进行计算,而是希望使用粘性文本的偏移量。所以改为使用:var scroll = $('.text').offset().top;

如果有帮助,请告诉我。

编辑 here是你编辑的小提琴。 请注意,我编辑了您设置蓝色类的行,因为您不希望将粘性偏移与自身匹配。

答案 1 :(得分:0)

要了解窗口内的某些内容,您必须使用类似......

的内容
if($(elem).offset().top - $(window).scrollTop < $(window).height()){
  //stuff
}

只要elem在页面上可见,就应该触发!例如,如果您希望它在页面中心触发,则可以针对$(window).height()/ 2进行检查。希望这有帮助!