0

我正在创建一个页面，其中导航栏只应在滚动几千像素后出现。但是当我刷新浏览器时，导航栏首先出现，然后在我开始滚动时消失。之后，一切都按预期工作。

刷新页面时如何使栏隐藏？

这里是我使用的 JS 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){$(window).scroll(function(){
            if( $(this).scrollTop() > 4000){
              $('#navigation').fadeIn( "slow", "linear" )
            } else {
              $('#navigation').fadeOut( "slow", "linear" )
            }
          })
        })
     </script>

这是我使用的CSS代码：

nav ul {
        position:fixed;
        list-style: none;
        width: 1100px;
        height: 40px;
        margin: 30px 222px auto;
        padding: 20px 20px 20px 20px;
        background-color: #798c39;
        text-align: center;
        }
4

2 回答 2

1

也许尝试另一种方式。我建议不要使用 jquery 做所有事情，而是使用纯 javascript 和 css。这种方法效率更高，效果更好。

const nav = document.querySelector('#navigation');

function showNav(){
    nav.classList.add('show');
}

function hidewNav(){
    nav.classList.remove('show');
}
var currPos = window.scrollY;
document.addEventListener('scroll', () => {
  if (window.scrollY < currPos) {
  //scroll up
    hidewNav();
  } else {
  //scroll down
    showNav();
  }
  currPos = window.scrollY;
});
body {
  margin: 0;
  height: 2000px;
  margin-top: 100px;
}

nav {
  position: fixed;
  list-style: none;
  width: 100%;
  height: 70px;
  top: 0;
  margin: 0;
  background-color: #798c39;
  text-align: center;
  transform: translateY(-100px);
  transition: 0.3s;
}

.show {
  transform: translateY(0);
}
<html>
  <head>

  </head>
  <body>
    <header>
      <nav id="navigation">
        <ul>

        </ul>
      </nav>
    </header>
    <main>
   
    </main>
  </body>
</html>

于 2021-08-19T08:11:19.417 回答
0

这取决于导航栏的空间是否在加载时为其保留。

我怀疑它给定了您显示的 JS，在这种情况下，您需要确保它具有 opacity: 0 on load。

对代码的唯一更改是在样式表中添加：

nav {
  opacity: 0;
}

这是假设淡入/淡出关键帧只是改变不透明度。例如，它们也会改变某些维度，这也需要迎合。也许您可以向我们展示这些关键帧以便我们检查？

于 2021-08-19T07:49:33.993 回答