javascript - 如何在 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 尝试使用它

像这样

    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“标题”，当您向下滚动时添加样式顶部:“-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";

   }
})