Add/Remove class to header when is over a section with class-CodePudding

I'm trying to add/remove a class to the sticky header, when this reaches a specific section with a class "dark-section", but i want to do it automaticly if there are 2 or more section with the same class.

jQuery(function ($) {
  
  'use strict';

  var Header    = $('.header');


  function HeaderDarkMode() {
    var scrollTop = $(window).scrollTop(),
        dark = $('.dark-section');

    dark.length && dark.each(function () {
      var top = $(this).position().top,
          height = $(this).outerHeight(),
          bottom = top   height;

      scrollTop >= top - 45 && scrollTop < bottom - 45 ? Header.addClass('dark') : Header.removeClass('dark');


    });
  }

  $(window).scroll(function() {

    HeaderDarkMode();

  });


});

body{
  margin: 0;
  padding: 0;
}
header{
  background: gray;
  opacity: .5;
  min-height: 90px;
  position: sticky;
  top: 0;
  width: 100%
}
header.dark{
  background: red;
}
section{
  min-height: 800px;
}
section.dark-section{
  background: black;:
}

footer{
  min-height: 300px;
  backgroud-color: #f1f1f1;
}

<html>
<head>
    <title>Dark Header Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<header ></header>

<section></section>
<section ></section>
<section></section>
<section ></section>
<section></section>
<section ></section>
  <section></section>

<footer></footer>

</body>
</html>

This is my code i'm working on, but it seems that only work with the last selector founded.

Help.

CodePudding user response：

The problem you are facing is that when you cycle over all .dark-sections in your code and add or remove .dark from the header, you always end up with the last iteration's result. If you are over the second dark section, it correctly adds the class, but then it has to calculate if you happen to be over the third dark section, which you are not because you are only over the second one, so it removes the class again. You need to change this calculation so that either it stop on match, or you use flags. Since your code uses jQuery, I will go with the later option:

// use a variable to keep track of state
var isOverAnyDarkSection = false
dark.each(function () {
    var top = $(this).position().top,
        height = $(this).outerHeight(),
        bottom = top   height;

    if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
        // set the flag to true the header is over any dark section
        isOverAnyDarkSection = true
    }
});

// finally, only now decide if the class should be added or removed
if (isOverAnyDarkSection) {
    Header.addClass('dark')
} else {
    Header.removeClass('dark')
}

This way, the class is only added or removed once based on the state.

CodePudding user response：

Code ended like this

Thanks to @Jakub-Kotrs

jQuery(function ($) {
        
  'use strict';

  var Header    = $('.header');


  function HeaderDarkMode() {
    var scrollTop = $(window).scrollTop(),
      dark = $('.dark-section');

    // use a variable to keep track of state
    var isOverAnyDarkSection = false
    dark.each(function () {
        var top = $(this).position().top,
            height = $(this).outerHeight(),
            bottom = top   height;

        if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
            // set the flag to true the header is over any dark section
            isOverAnyDarkSection = true
        }
    });

    // finally, only now decide if the class should be added or removed
    if (isOverAnyDarkSection) {
        Header.addClass('dark')
    } else {
        Header.removeClass('dark')
    }
  }

  $(window).scroll(function() {

    HeaderDarkMode();

  });


});

body{
            margin: 0;
            padding: 0;
        }
        .header{
            background: gray;
            opacity: .5;
            min-height: 90px;
            position: sticky;
            top: 0;
            width: 100%
        }
        .header.dark{
            background: red;
        }
        section{
            min-height: 800px;
        }
        .dark-section{
            background: black;:
        }

<html>
<head>
    <title>Dark Header Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<header ></header>

<section></section>
<section ></section>
<section></section>
<section ></section>
<section></section>
<section ></section>
  <section></section>

<footer></footer>

</body>
</html>