Change colour of header every time you scroll onto a black background

Question

So I am building a site that has white background panels and black background panels. The header is fixed and the li items are black along with a black logo, however when you scroll onto a black background you cant see the header therefore I have set up some js that will change the header styles once you have scrolled to a black background element. However I cant figure out why it wont change back once you have scrolled off the black background?

Here is my code

if(document.body.querySelector('.blackBg')){

// getting all lines on page
var blackBgEl = document.querySelectorAll('.blackBg');
var headerEl = document.querySelector('header[role="banner"]');


window.addEventListener('scroll', function(){

    for(i = 0; i < blackBgEl.length; i++){

        var blackBgEls = blackBgEl[i];
        // getting the position of the black background panel
        var panelTopPos = blackBgEls.getBoundingClientRect().top;
        var panelBottomPos = blackBgEls.getBoundingClientRect().bottom;

        var scrolledDistance = window.pageYOffset;

        if (scrolledDistance >= panelTopPos){

            headerEl.classList.add('changeHeaderColour');
        } else {

            if(scrolledDistance >= panelBottomPos) {
                headerEl.classList.remove('changeHeaderColour');

            }

        }
    }
});

}

Answer 1 · 2019-01-31T21:18:58Z

January 31, 2019 9:18pm

If scrolledDistance >= panelBottomPos won't it always be >= panelTopPos as well? Therefore your else statement will never execute.

Welcome to the Treehouse Community

Looking to learn something new?

Sam Bell

Sam Bell

Change colour of header every time you scroll onto a black background

1 Answer

KRIS NIKOLAISEN

KRIS NIKOLAISEN