如何在 React 或 JavaScript 中隐藏导航栏或向下滚动的任何其他部分？

Question

如何在 React 或 JavaScript 中隐藏导航栏或向下滚动的任何其他部分？

我正在尝试通过使用此代码来解决，您可以尝试使用它

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}


### javaScript

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">About</a>
  <a href="#contact">Services</a>
  <a href="#contact">FAQ</a>
</div>

<div style="padding:15px 15px 2000px;font-size:30px;margin-top:30px;">
  <p><b>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit</b></p>
  <p>Scroll up to show the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>




### style

这是为 React 准备的

如果你想在 React 中使用 This 尝试使用 this

喜欢这个

    render() {

            var prevScrollpos = window.pageYOffset;
            window.onscroll = function() {
                var currentScrollPos = window.pageYOffset;
                if (prevScrollpos > currentScrollPos) {
                    document.getElementById("header").style.top = "0";
                } else {
                    document.getElementById("header").style.top = "-55px";
                }
                prevScrollpos = currentScrollPos;
            } 


        return (
            <header className="header gradientBg1" id="header" style={{
                transition: "top 0.3s", position: "sticky", zIndex: "1"}}>
Your navitems
           </header>
);
}

当您向下滚动样式顶部时，获取 id “header”：“-55px”；并在滚动顶部时删除样式

注意：如果您有更好的解决方案，请帮助我

Answer 1

更好的解决方案是像这样使用wheel 事件：

document.addEventListener("wheel", function(event){

   if(event.deltaY > 0) {
     // we are going down
     document.getElementById("header").style.top = "-55px";

   }

   else {
     // we are going up
    document.getElementById("header").style.top = "0";

   }
})