如何检查类是否在距顶部 50 到 150 像素之间，然后选择类 ID 属性

Question

我试图找到一种更干净的方法来检测一个类是否朝向屏幕顶部 - 但在某个阈值内。例如，从顶部开始 50 到 150 像素之间。

我在这里做了一些使用 ID 进行检查的事情，但它非常重复。 是否有可能让一个类使用它而不是 ID？

   $(window).on('scroll', function() {
     var scrollTop = $(window).scrollTop();
     var elementFromTop = $('#section_a').offset().top;          
     var distanceFromTop  = (elementFromTop - scrollTop);
     if (distanceFromTop > 0 && distanceFromTop < 100) {
       console.log("section_a in zone- highlight link in nav");
     }
   });
   $(window).on('scroll', function() {
     var scrollTop = $(window).scrollTop();
     var elementFromTop = $('#section_b').offset().top;          
     var distanceFromTop  = (elementFromTop - scrollTop);
     if (distanceFromTop > 0 && distanceFromTop < 100) {
       console.log("section_b in zone- highlight link in nav");
     }
   });
   <div class="section" id="section_a"> width is 100%</div>
   <div class="section" id="section_b"> width is 100%</div>

Answer 1

你可以尝试使用 jquery 的 .each（） 应用该代码。

像这样的东西？

$('.myclass').each(function(){
     var id = $(this).attr('id');
     var scrollTop = $(window).scrollTop();
     var elementFromTop = $('#' + id ).offset().top;          
     var distanceFromTop  = (elementFromTop - scrollTop);
     if (distanceFromTop > 0 && distanceFromTop < 100) {
       console.log("id" + id + " in zone- highlight link in nav");
     }
});

这会将您的代码应用于该类的每个项。