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

Question

Jquery beginner here.

I'm currently using the below script in order to find an element and then add/remove a class based on the scroll position from said element.

I'm trying to make my fixed navigation icon change colour when over the dark background.

Currently my code says find element 1 and then addClass to element 2 when the user scrolls 1000px after the element is found. It works but isn't ideal as the page is responsive and the sections change height.

You can see here, section 2 is the white section below the top section: http://leebuckle.co.uk/

Id like find the height of section 2 and then add the class once the user scrolls the height of section 2. So it would be +(section_2 height) rather than +1000px

Thanks in advance!

$(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

You can use offset from jQuery to get the position of an element from the top of the document.

So your line that has

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

May look something like:

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

Answer 2

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

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