Hide two blocks at the same time

Question

I have a method on a page that opens and hides a scrolling block in certain places

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    var sideMenu, footer, wrapper, nsl;

    document.addEventListener("DOMContentLoaded", init, false);

    function check() {
      var range = document.body.scrollHeight - footer.offsetHeight;
      var position = (nsl.offsetHeight + nsl.getBoundingClientRect().y - wrapper.getBoundingClientRect().y).toFixed(1);

      nsl.innerText =
        '\n Range: ' + range +
        '\n Position: ' + position;

      if (window.scrollY > 200 && (range > position)) {
        nsl.style.visibility = "visible";
      } else {
        nsl.style.visibility = "hidden";
      }
    };

    function init() {
      sideMenu = document.getElementById('sideMenu');
      footer = document.getElementById('footer');
      wrapper = document.getElementById('wrapper');
      nsl = document.getElementById('navShareLink');

      window.onscroll = check;
      check();
    }
  </script>
  <style>
    .article-wrapper {
      min-height: 200vh;
      position: relative;
      top: 0;
      left: 0;
    }

    .article-wrapper p:first-of-type {
      margin-top: 0;
    }

    footer {
      min-height: 100vh;
      background-color: lightskyblue;
    }

    .sidemenu-shares {
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: center;
      position: fixed;
      top: 0;
      right: 0;
      flex-wrap: nowrap;
      gap: 40px;
    }

    .rectangle {
      z-index: 998;
      transition: opacity 0.5s;
      padding: 5px;
      height: 106px;
      width: 123px;
      background-color: rgba(200, 0, 0, 0.1);
      border-radius: 24px;
    }

    .content {
      height: 50px;
      border: 1px dotted gray;
    }

  </style>
</head>

<body>
  <div id="wrapper" class="article-wrapper">

    <div id='sideMenu' class="sidemenu-shares">
      <div id="navShareLink" class="rectangle">

      </div>
    </div>

    <div class="main-banner">
      <h1>Title</h1>
    </div>

    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
  </div>

  <footer id='footer'>
    Footer...
  </footer>
</body>

</html>

Now it turns out that in my sideMenu there is only one block, but I want to add another one and so that they hide and open together

This is how the code should look like after adding the block

<div id='sideMenu' class="sidemenu-shares">
    <div id="navShareLink" class="rectangle">

    </div>

    <div id="navToTop" class="to-top">

    </div>
</div>

But now I can't make them both hide

I am trying to do the following in js

nsl = document.querySelectorAll("#navShareLink, #navToTop");

But everything works incorrectly and nothing is hiding at all

You could echo either a class that hides the code or style="display:none" — Aless55, Nov 29 '21 at 12:55
getElementById returned the reference to one HTML element directly. If you replace that by querySelectorAll, which returns a NodeList - then you need to loop over that list, to access & set the properties of the individual elements. https://stackoverflow.com/q/12330086/1427878 — CBroe, Dec 06 '21 at 12:23

score 1 · Accepted Answer · answered Dec 06 '21 at 12:34

I am still not much clear what exactly the problem but as I can understand you facing issues in the show and hiding the element. this code is not working

 if (window.scrollY > 200 && (range > position)) {
    nsl.style.visibility = "visible";
  } else {
    nsl.style.visibility = "hidden";
  }

you just need to update it with

if (window.scrollY > 200 && (range > position)) {
        nsl.style.display = "block";
        nsl1.style.display = "block";
      } else {
       
        nsl.style.display = "none";
        nsl1.style.display = "none";
      }

here is working demo

<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var sideMenu, footer, wrapper, nsl;

    document.addEventListener("DOMContentLoaded", init, false);

    function check() {
      var range = document.body.scrollHeight - footer.offsetHeight;
      var position = (nsl.offsetHeight + nsl.getBoundingClientRect().y - wrapper.getBoundingClientRect().y).toFixed(1);

      nsl.innerText =
        '\n Range: ' + range +
        '\n Position: ' + position;

      if (window.scrollY > 200 && (range > position)) {
        nsl.style.display = "block";
        nsl1.style.display = "block";
      } else {
       
        nsl.style.display = "none";
        nsl1.style.display = "none";
      }
    };

    function init() {
      sideMenu = document.getElementById('sideMenu');
      footer = document.getElementById('footer');
      wrapper = document.getElementById('wrapper');
      nsl = document.getElementById('navShareLink');
nsl1 =  document.getElementById('navToTop');
      window.onscroll = check;
      check();
    }
  </script>
  <style>
    .article-wrapper {
      min-height: 200vh;
      position: relative;
      top: 0;
      left: 0;
    }

    .article-wrapper p:first-of-type {
      margin-top: 0;
    }

    footer {
      min-height: 100vh;
      background-color: lightskyblue;
    }

    .sidemenu-shares {
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: center;
      position: fixed;
      top: 0;
      right: 0;
      flex-wrap: nowrap;
      gap: 40px;
    }

    .rectangle {
      z-index: 998;
      transition: opacity 0.5s;
      padding: 5px;
      height: 106px;
      width: 123px;
      background-color: rgba(200, 0, 0, 0.1);
      border-radius: 24px;
    }

    .content {
      height: 50px;
      border: 1px dotted gray;
    }

  </style>
</head>

<body>
  <div id="wrapper" class="article-wrapper">

    <div id='sideMenu' class="sidemenu-shares">
      <div id="navShareLink" class="rectangle">

      </div>
      <div id="navToTop" class="to-top">
<h1>hello</h1>
    </div>
    </div>

    <div class="main-banner">
      <h1>Title</h1>
    </div>

    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
  </div>

  <footer id='footer'>
    Footer...
  </footer>
</body>

</html>

score 1 · Answer 2 · answered Dec 06 '21 at 12:58

You could select a list of nodes with querySelectorAll, and loop over it, to show all the elements in the list like so:

<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var sideMenu, footer, wrapper, nsl, list;

    document.addEventListener("DOMContentLoaded", init, false);

    function check() {
      var range = document.body.scrollHeight - footer.offsetHeight;
      var position = (nsl.offsetHeight + nsl.getBoundingClientRect().y - wrapper.getBoundingClientRect().y).toFixed(1);

      nsl.innerText =
        '\n Range: ' + range +
        '\n offsetHeight: ' + nsl.offsetHeight +
        '\n nsl.y: ' + nsl.getBoundingClientRect().y +
        '\n wrapper.y: ' + wrapper.getBoundingClientRect().y +
        '\n Position: ' + position +
        '\n scrollY: ' + window.scrollY;

      if (window.scrollY > 200 && (range > position)) {
        list.forEach(element => element.style.display = "block");
      } else {
        list.forEach(element => element.style.display = "none");
      }
    };

    function init() {
      sideMenu = document.getElementById('sideMenu');
      footer = document.getElementById('footer');
      wrapper = document.getElementById('wrapper');
      nsl = document.getElementById('navShareLink');
      list = document.querySelectorAll('.navLink');
      window.onscroll = check;
      check();
    }
  </script>
  <style>
    .navLink{
     display: none;        
    }

    .article-wrapper {
      min-height: 200vh;
      position: relative;
      top: 0;
      left: 0;
    }

    .article-wrapper p:first-of-type {
      margin-top: 0;
    }

    footer {
      min-height: 100vh;
      background-color: lightskyblue;
    }

    .sidemenu-shares {
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: center;
      position: fixed;
      top: 0;
      right: 0;
      flex-wrap: nowrap;
      gap: 40px;
    }

    .rectangle {
      z-index: 998;
      transition: opacity 0.5s;
      padding: 5px;
      height: 106px;
      width: 123px;
      background-color: rgba(200, 0, 0, 0.1);
      border-radius: 24px;
    }

    .content {
      height: 50px;
      border: 1px dotted gray;
    }

  </style>
</head>

<body>
  <div id="wrapper" class="article-wrapper">

    <div id='sideMenu' class="sidemenu-shares">
      <div id="navShareLink" class="navLink" class="rectangle">

      </div>
      <div id="navToTop" class="navLink" class="to-top">
        <h1>hello</h1>
      </div>
    </div>

    <div class="main-banner">
      <h1>Title</h1>
    </div>

    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
    <div class='content'>Main content...</div>
  </div>

  <footer id='footer'>
    Footer...
  </footer>
</body>

</html>

Hide two blocks at the same time

2 Answers2