小编Ema*_*uel的帖子

引导程序 4 Alpha 6

我似乎无法弄清楚如何使正确的链接和左链接都折叠起来。现在只有右手边的链接崩溃。

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</div>

<a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>

滚动到某一点后,我试图更改图像.我尝试了以下但滚动时它会改变.

    jQuery(function($) {
 $(window).scroll(function() {
   if($('.navbar').hasClass('navbar-brand')) {
     $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }else{
     $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

我试图为它添加以下代码,以了解何时在图像之间切换,但失败了

    var wn = $(window).scrollTop();
    if(wn > 700){

使用Bootstrap 4，如何使固定顶部导航栏在滚动时消失？我已在HTML代码下方附加了默认的Bootstrap 4导航栏。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Test</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto py-md-2">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>