導航欄在滾動時固定。 用javascript

Question

我不編寫JavaScript代碼，因此對我來說，了解如何開發導航欄使其看起來像這樣是一個問題： http : //www.bootply.com/kD5wiG5udv

我顯然已經使用了常識並交換了選擇器，但是它仍然無法正常工作。 有人可以建議我下一步該怎么做嗎？

請使用上述網站瀏覽我的代碼，因為我不會在該帖子中添加引導文件。 它們太大了。

本傑明

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

CSS：

.navbar-default

{

  background-color: #fbfbfb;
}

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #f2f3f2;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 

.navbar-nav {

  margin-left: 50px;
  margin-top: -5px;
}

使用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);
});

Answer 1

我認為，如果您的網站與舊版本的瀏覽器不兼容，那么最好在CSS中做更多的事情。 我不確定Bootstrap是否有自己的方法來實現類似的操作，但是在這里您可以了解如何自己執行此操作。 jQuery的主要作用是在滾動事件上添加一個類，這將觸發不透明動畫。 這應該是解決問題的更干凈的方法，因為它既平滑又快速。 這是工作的小提琴： https : //jsfiddle.net/q5jo781c/1/

這部分在滾動上切換類：

$(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。 希望能幫助到你。