Question 246403 in Html Question posted in
Some basic documentation can be found here.

Html – How to do I hide and show a class on using window.scrollY?

Hi all I have a class called “squareOne” that contains a hidden square and reveals itself when the window.scrollY is at 20. After this occurs I want “sqaureOne” to hide itself again at window.scrollY 30 and reveal a second class called “squareTwo”. As you can see in my JavaScript I tried adding another if statement but my syntax is most likely wrong. Can anyone help? Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>show/hide</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div parent>

<div id="s1" class="squareOne hide"></div>
<div id="s2" class="squareTwo hide"></div>

</div>
  <script src="script.js"></script>

</body>
</html>

body {
  height: 2000px;
}
.parent{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}
.squareOne {
  position: fixed;
  width: 60px;
  height: 60px;
 background: palegreen;
  z-index: 1;
  transition: all .5s;
}
.squareTwo{
  position: fixed;
  width: 60px;
  height: 60px;
  background: orange;
  z-index: 1;
  transition: all .5s;
}
.hide {
  opacity:0;
 
}
.show {
  opacity:1;

}

s1 = document.getElementById("s1");
s2 = document.getElementById("s2");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 20) {
        s1.className = "squareOne show"    
    }


    //This part is the main issue.//

    if (y >= 30) {
      s1.className = "squareOne hide"    
  }
  if (y >= 40) {
    s2.className = "squareTwo show"    
} if (y >= 50) {
    s2.className = "squareTwo hide"    
}


    
  
};

window.addEventListener("scroll", myScrollFunc);
Tags:

3

Answers


  1. 0

    The problem with your code is that you’re using multiple if statements that can override each other. For instance, when you scroll to scrollY = 31, the first if condition (y >= 20) is still true, so it will continue to apply the "show" class to the squareOne. Immediately after, (y >= 30) is also true, which hides it again. This causes flickering and unexpected behavior.

    To fix the issue, you should use a series of if-else statements, and also consider ranges for showing and hiding each element. Here’s how to fix it:

    var myScrollFunc = function() {
    var y = window.scrollY;
    if (y >= 20 && y < 30) {
        s1.className = "squareOne show";
        s2.className = "squareTwo hide";  // Hide the second square
    } else if (y >= 30 && y < 40) {
        s1.className = "squareOne hide";
    } else if (y >= 40 && y < 50) {
        s2.className = "squareTwo show";
    } else if (y >= 50) {
        s2.className = "squareTwo hide";
    }
};

window.addEventListener("scroll", myScrollFunc);

    Here’s a brief breakdown of what the code does:

    If scrollY is between 20 and 30, show squareOne and hide squareTwo.
If scrollY is between 30 and 40, hide squareOne.
If scrollY is between 40 and 50, show squareTwo.
If scrollY is above 50, hide squareTwo.

    This will prevent the flickering and unexpected behavior by ensuring only one condition is met at a time.

    Login or Signup to reply.
  2. 0

    I have edited your scroll function:

    const myScrollFunc = function () {
    let y = window.scrollY;

    // Box 1 logic
    if (y >= 200 && y <= 600) { s1.className = "squareOne show" } 
    else { s1.className = "squareOne hide" }
    
    // Box 2 logic
    if (y >= 600) { s2.className = "squareTwo show" } 
    else { s2.className = "squareTwo hide" }
};

    I have used bigger values than 20 and 30 to make it more visible. You can change these. The important thing is to have a range for the first box as it should appear between 20 and 30 y-value and hide before box 2 appears at 30. Otherwise before 20 they should both be hidden and above 30 only box 2 should be showing.
    Hope this helps.

    Update from comment

    You need to add another condition statement

    s1 = document.getElementById("s1");
s2 = document.getElementById("s2");
s3 = document.getElementById("s3");

const myScrollFunc = function () {
    let y = window.scrollY;

    // Box 1 logic
    if (y >= 200 && y <= 600) { s1.className = "squareOne show" } 
    else { s1.className = "squareOne hide" }
    
    // Box 2 logic
    if (y >= 600 && y <= 900) { s2.className = "squareTwo show" } 
    else { s2.className = "squareTwo hide" }

    // Box 3 logic
    if (y >= 900) { s3.className = "squareThree show" } 
    else { s3.className = "squareThree hide" }
};
    1. Check that scroll is from 200-600, for box 1
    2. Check that it is from 600-900, for box 2
    3. Check that it is above 900, for box 3
    Login or Signup to reply.
  3. 0

    Do your logic from the opposite side.

    s1 = document.getElementById("s1");
s2 = document.getElementById("s2");

var myScrollFunc = function () {
    var y = window.scrollY;
    if(y >= 50) {
     s2.classList.replace("show", "hide")
    } else if (y >= 40) {
     s2.classList.replace("hide", "show")
    } else if(y >= 30) {
     s1.classList.replace("show", "hide")
    } else if (y >= 20) {
     s2.classList.replace("show", "hide")
     s1.classList.replace("hide", "show")
    }
};
window.addEventListener("scroll", myScrollFunc);
    body {
  height: 2000px;
}
.parent{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}
.squareOne {
  position: fixed;
  width: 60px;
  height: 60px;
 background: palegreen;
  z-index: 1;
  transition: all .5s;
}
.squareTwo{
  position: fixed;
  width: 60px;
  height: 60px;
  background: orange;
  z-index: 1;
  transition: all .5s;
}
.hide {
  opacity:0;
 
}
.show {
  opacity:1;
}
    <div parent>

<div id="s1" class="squareOne hide"></div>
<div id="s2" class="squareTwo hide"></div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search