导航栏固定时滚动。使用javascript

我不编写javascript，因此我很难理解如何将我的导航栏开发成这样：

很明显，我使用了常识并交换了选择器，但它仍然不起作用。有人能告诉我下一步该采取什么措施吗

请使用上面的网站浏览我的代码，因为我不会将引导文件添加到本文中。它们太大了

本杰明

<nav class="navbar navbar-default" role="navigation" id="nav">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
      <a class="navbar-brand" href="#">
        <img alt="" src="">
      </a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Projects</li>
            <li><a href="#">Services</li>
            <li><a href="#">About</li>
            <li><a href="#">Contact</li>
        </ul>
    </div>
  </div>
</nav>

Javascript:

/* affix the navbar after scroll below header */
$('#nav').affix({
      offset: {
        top: $('header').height()-$('#nav').height()
      }
}); 

/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })

/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
  $('body,html').animate({scrollTop:0},1000);
})

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  $('body,html').animate({scrollTop:posi},700);
});

---

在我看来，如果您的网站不希望与旧版本的浏览器兼容，那么尽可能多地使用CSS将非常好。我不确定Bootstrap是否有自己的方式来实现类似的东西，但在这里，您可以自己了解如何实现。 jQuery在这里的主要作用只是添加一个滚动类事件，这将触发不透明动画。这应该是一个更干净的问题解决方案，因为它将是平稳和快速的。这是工作小提琴：

此部件在滚动时切换类别：

$(document).ready(function(){
    $(document).scroll(function(){
        var st = $(this).scrollTop();
        if(st > 200) {
            $("navbar").addClass('fixed');
        } else {
            $("navbar").removeClass('fixed');
        }
    });
});

和CSS：

navbar {
  width: 100%;
  display: block;
  height: 50px;
  background-color: black;
}

navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

---

你可以在小提琴中找到更多的CSS。希望有帮助。

我可能会在导航栏中添加一些类，将其位置重写为

absolute

，并添加其他效果，如颜色等（都在CSS中）。JS（或您的示例中的jQuery）中需要做的一件事是，当用户滚动窗口中所需的部分时，添加事件处理程序，然后添加类。jQuery中的“else”部分在小提琴中丢失，因此如果您向上滚动，菜单不会变回正常。你能编辑吗？

navbar {
  width: 100%;
  display: block;
  height: 50px;
  background-color: black;
}

navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}