Question

所以我在滚动100px后出现了一个导航栏。并且它可以工作但是，它会在页面加载时显示，然后当您滚动一点时它会消失，并且在您经过100px后它会淡入。

        .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>

有人可以帮我一把吗？

Answer 1

您的#nav在页面加载时可见，因为没有人告诉它不是。所以只需添加以下行：

#nav{
    background-color: rgba(0,0,0,0.2);
    display:none;
    }

粘性褪色导航栏即将出现

1 个答案: