Change header background and font-color after scrolling through gray section

Question

I want to add a class to header after (gray)section scroll is over. And remove the same class when (gray)section reappers on scroll-up. https://jsfiddle.net/tgLybw2e/1/

$(window).scroll(function(event){
    didScroll = true;
});

Answer 1

You can use a window.onscroll function along with window.scrollY to detect when the screen has scrolled to the bottom of the gray element, then add a class.

This could be made more dynamic by using JS to get the height of the gray element so it doesn't need to be hardcoded to the same value as set in CSS.

 window.onscroll = function() { var header = document.getElementById('header'); if (window.scrollY > 630) { header.classList.add('updated-class'); } else { header.classList.remove('updated-class'); } } 

 header{ height: 70px; border-bottom: 1px solid #000; position: fixed; color: #fff; left:0; right:0; text-align:center; } header.changeColor{ color: 000; } section{ height: 700px; background: #cdcdcd; } section + section{ background: #fff; } .red{ background:red; } .updated-class { background-color: red; transition: background 1s linear; } 

 <header id="header"> abcfdff </header> <section> </section> <section> </section> <section class="red"> </section> 

Answer 2

Try this,

$(window).scroll(function(event){
    if (window.scrollY > 700) {
        $('header').addClass('changeColor');
    }else
        $('header').removeClass('changeColor');
});

jsFiddle for the same https://jsfiddle.net/tgLybw2e/2/

Answer 3

step one1 On window load add class to header & count height of gray section step 2 On event window scroll count scroll Y of window

step 3 create function to compare gray height = window scroll Y, when its true, remove class from header.