Question

Jquery初学者。

我目前正在使用下面的脚本来查找元素，然后根据所述元素的滚动位置添加/删除一个类。

我试图让我的固定导航图标在黑暗的背景下改变颜色。

目前，当用户在找到元素后滚动1000px时，我的代码说找到元素1然后将addClass添加到元素2。它的工作原理但并不理想，因为页面是响应式的，并且部分会改变高度。

您可以在此处看到，第2部分是顶部下方的白色部分：http://leebuckle.co.uk/

我喜欢找到第2部分的高度，然后在用户滚动第2部分的高度后添加该类。因此它将是+（section_2 height）而不是+ 1000px

提前致谢！

$(document).ready(function(){
  var div = $("#section_2");
  var pos = div.position();

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

  if (windowpos >= (pos.top + 1000)) {
    $( "#nav-icon span" ).addClass("black_menu");
  }

 else {
    $( "#nav-icon span" ).removeClass("black_menu");
  }

  });
});

Answer 1

您可以使用jQuery中的offset从文档顶部获取元素的位置。

所以你的行

if (windowpos >= (pos.top + 1000)) { ...

可能看起来像：

if (windowpos >= (div.offset().top)) { ...

Answer 2

使用jQuery的.offset()获取section2 + .height()的顶部位置，以动态获取section2的高度。

if (windowpos >= (div.offset().top + div.height()))

Jquery：从顶部+元素高度找到元素位置以激活addClass

2 个答案: