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
Advertisement
Answer
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>