粘性渐弱的导航栏似乎很快

Sticky fading navbar appearing to soon

本文关键字：很快 导航      更新时间：2023-09-26

所以我制作了一个导航栏，滚动100px后就会出现。它是有效的，但是，当页面加载时，它会出现，然后当你滚动一点时，它就会消失，当你超过100像素后，它会消失。

        .sticky {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 100;
        border-top: 0;
    }
    #nav {
        background-color: rgba(0,0,0,0.2);
        }
    #nav a {
        font-family: 'Lato', sans-serif;
        text-decoration: none;
        font-size: 20px;
        color: #000;
        text-transform: uppercase;
        float: left;
        position: relative;
        padding: 10px;
        left: 40%;
        /** Pulse effect 1 **/
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
    }
    /** Pulse effect 2 **/
    #startpagenav a:hover, a:focus, a:active {
      -webkit-animation-name: hvr-pulse;
      animation-name: hvr-pulse;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      }
<div id="nav">
     <a href="#home">Home</a>
     <a href="#about">About</a>
     <a href="#portfolio">Portfolio</a>
     <a href="#contact">Contact</a>
          <script>
     $(document).ready(function() {
var stickyNavTop = $('#nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) { 
    $('#nav').addClass('sticky');
} else {
    $('#nav').removeClass('sticky'); 
}
};
stickyNav();
$(window).scroll(function() {
    stickyNav();
});
});
     </script>
     <script>
     $(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 100) {
    $('#nav').fadeIn();
  } else {
    $('#nav').fadeOut();
  }
});
     </script>
</div>

有人能帮我一把吗？

您的#nav在页面加载时是可见的，因为没有人告诉它不要这样做。所以加上这行：

#nav{
    background-color: rgba(0,0,0,0.2);
    display:none;
    }
相关文章：