Javascript eventListener scrolling only works when scrolling down, not when scrolling up

user_4250396 0
Viewed 52

I have minimal to no experience with HTML/CSS/JS so most of this is copy and pasted. I am using a website building service called cargo. I am trying to change the background color based on the scroll position of the user. Everything works perfectly when starting at the top and scrolling down. But scrolling up does not allow the colors to change at all (except for the "body" color once you reach the top).

HTML/JS:

<script>
    function changeBackground(){
        if(scrollY >= 300 && scrollY < 900)    {
        document.body.classList.add('bg-color');
        }  
      
        else if(scrollY >= 900 && scrollY < 1900){
          document.body.classList.add('bg-color-orangeyellow');
          }
        else if(scrollY >=1900 && scrollY < 2700){
            document.body.classList.add('bg-color-white');
            } 
        
        else{  
            document.body.classList.remove('bg-color');
          document.body.classList.remove('bg-color-orangeyellow');
            document.body.classList.remove('bg-color-white');
    
        
          }
        }
        addEventListener('scroll', changeBackground); 
    </script>

CSS:

body {
    background-color:rgb(166, 199, 255);
    transition: all 0.5s ease;
  }
.bg-color{
    background-color: #11923d;
    
}
.bg-color-orangeyellow{
    background-color: #ffb217;
        
}
.bg-color-white{
    background-color: white;
event-listener scroll background javascript
2 Answers

The problem is that in each if statement you're adding classes but not removing them.

One option would be to remove the other classes in each if statement, you could also just set the background color with inline style instead to avoid having to toggle these classes on and off like so:

    function changeBackground(){
        const bodStyle = document.body.style;
        if(scrollY >= 300 && scrollY < 900)    {
          bodStyle.backgroundColor = '#11923d';
        }  
      
        else if(scrollY >= 900 && scrollY < 1900){
          bodStyle.backgroundColor = '#ffb217';
          }
        else if(scrollY >=1900 && scrollY < 2700){
          bodStyle.backgroundColor = '#ffffff'
        }
        else{  
          bodStyle.backgroundColor = 'rgb(166, 199, 255)';
          }
        }
        document.addEventListener('scroll', changeBackground); 
body {
    background-color: rgb(166, 199, 255);
    transition: all 0.5s ease;
    height: 5000px;
  }

Note: I only added the height to the CSS so you could scroll in the code snippet.

user_177939950

Basically your code exists on the first conditional block that is matched and else is not called, so those classes are not removed as you go back up. You could make your code a bit more dynamic like this.

function changeBackground() {
  const positions = [{
      dist: (scrollY >= 300) && (scrollY < 900),
      cls: 'bg-color'
    },
    {
      dist: (scrollY >= 900) && (scrollY < 1900),
      cls: 'bg-color-orangeyellow'
    },
    {
      dist: (scrollY >= 1900) && (scrollY < 2700),
      cls: 'bg-color-white'
    }
  ]

  positions.forEach(({
    dist,
    cls
  }) => {
    const action = dist ? 'add' : 'remove'
    document.body.classList[action](cls)
  })


}

addEventListener('scroll', changeBackground);
body {
  background-color: rgb(166, 199, 255);
  transition: all 0.5s ease;
  height: 2700px;
}

.bg-color {
  background-color: #11923d;
}

.bg-color-orangeyellow {
  background-color: #ffb217;
}

.bg-color-white {
  background-color: white;
}

user_46207710
Related