Make nav bar color match color of sections when scrolling

Question

I would like to change the colour of my navigation bar to suit the colour of the section scrolling past, and in reverse when scrolling the other way.

For example, if the navigation bar is currently dark and the next section to hit the navigation bar is light, I would like to change the nvigation bar to dark.

This is what I have done so far which I feel is relatively close. Please advise what is missing to make this work:

HTML

<nav>Navigation</nav>
<section data-section-color="dark">Section 1</section>
<section data-section-color="light">Section 2</section>
<section data-section-color="dark">Section 3</section>
<section data-section-color="light">Section 4</section>
<section data-section-color="dark">Section 5</section>
<section data-section-color="light">Section 6</section>

SCSS

$dark: #2B3336;
$light: #EEEEEE;

body {
  padding-top: 67px;
  margin: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background: $dark;
  color: $light;
  padding: 0 25px;
  line-height: 67px;
  
  &.dark {
    background: $dark;
    color: $light;
  }
  
  &.light {
    background: $light;
    color: $dark;
  }
}

section {
  height: 400px;
  padding: 25px;
  
  &[data-section-color="dark"] {
    background: $dark;
    color: $light;
  }
  
  &[data-section-color="light"] {
    background: $light;
    color: $dark;
  }
}

jQuery

$(window).on('scroll',function() {
    var $nav = $('nav');
    var navHeight = $nav.height();
    var amountScrolled = $(window).scrollTop();
  
  $('section[data-section-color]').each(function() {
    var thisTop = $(this).offset().top;
    if ((thisTop - navHeight) == 0) {
        var color = $(this).data('section-color');
      $nav.addClass(color);
      console.log(color);
    }
  });
});

JSFiddle:

JSFiddle

Answer 1

The math ((thisTop - navHeight) == 0) your using to target the current section is probably a little too restricted.

The following trys to determine if the nav is contained within the sections bounds.

$(window).on('scroll',function() {
    var $nav = $('nav');
    var navHeight = $nav.height();
  var navTop = $nav.offset().top;
  
  $('section[data-section-color]').each(function() {
    var thisTop = $(this).offset().top;
    var thisHeight = $(this).height();
    var color = $(this).data('section-color');
    if ((navTop >= thisTop) && (navTop+navHeight <= thisTop+thisHeight)) {
      $nav.removeClass(); // dark + light = ???
        $nav.addClass(color);
      console.log(color);
      return false // stop trying after weve found a match
    }
  });
});

Had another go, using getBoundingClientRect()

$(window).on('scroll', function() {
    let nav = $('nav')
    let navRect = nav[0].getBoundingClientRect()
    
    $('section[data-section-color]').each(function() {
        let itemRect = $(this)[0].getBoundingClientRect();
        if (navRect.bottom >= itemRect.top && navRect.top <= itemRect.bottom) {
            nav.removeClass(['dark','light'])
            if ($(this).data('section-color') === 'light') {
                nav.addClass('light')
            } else {
                nav.addClass('dark')
            }
        }
    })
})

Answer 2

jQuery:

var $nav = $("nav")
var navHeight = $nav.height()
$(window).on("scroll", function () {
  var amountScrolled = $(window).scrollTop()
  $("section[data-section-color]").each(function () {
    var thisTop = $(this).offset().top
    var thisHeight = $(this).height()
    if (
      parseInt(thisTop - navHeight) < amountScrolled &&
      parseInt(thisTop + thisHeight - navHeight) > amountScrolled
    ) {
      var color = $(this).data("section-color")
      $nav.attr("class", color)
    }
  })
})

JSFiddle:

JSFiddle