滾動更改徽標引導3

我的問題是如何在頁面滾動時更改徽標。我已經研究了堆棧溢出並找不到解決方案。沒有任何代碼帶來錯誤，我無法讓他們工作。滾動更改徽標引導3

下面是我想要解決的問題，我的網站的HTML，CSS和JavaScript的代碼。我的HTML如下：

<body id="page-top"> 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
      </button> 
      <a class="navbar-brand page-scroll" href="#page-top"><div class="pull-left"><img class="top-logo" src="img/jtorbiklogo1.png"></a></div> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right navbar-custom"> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#web">Web Design</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#graphic">Graphic Design</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav>

此代碼的CSS是boostrap.min.css和我自己的自定義CSS：

@media (min-width: 992px) { 
.top-logo { 
width: 600px; 
height: 100%; 
max-height:132px; 
min-height:132px; 
margin-top: -58px; 
margin-left: -180px; 
}

這是在我的992px寬的原因是，我只希望這種情況發生對於超過992的任何設備。我也有不同的標誌大小頁面縮小。一旦頁面滾動，我想添加JavaScript來更改導航欄中的徽標。我發現了一個JavaScript代碼，我認爲它會起作用，但需要進行調整。

$(window).scroll(function() { 
if ($(".navbar").offset().top > 50) { 
    $('#custom-nav').addClass('affix'); 
    $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    $('.navbar-brand img').attr('src','newImage.jpg'); //change src 
} else { 
    $('#custom-nav').removeClass('affix'); 
    $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    $('.navbar-brand img').attr('src','OldImage.jpg') 
} 
});

來源

2017-08-09 J Torbik

它在我看來像你的代碼工作。看看這個。 [CodePen演示]（https://codepen.io/dankreiger5/pen/QMvVVa） –

我看到它在copdepen上工作，但是當我嘗試實現到我的網站navbar時，它不響應。那是我被卡住了。我嘗試了一切。也許你可以看看它。 @DanKreiger –

如果它只與您提供的代碼一起工作，但不在您的網站上，那麼可能會有更多代碼導致問題。我的第一個猜測會是額外的CSS，它會覆蓋你在這裏提供的內容。檢查瀏覽器中的檢查器，看看是否所有的CSS都被應用了，並確保它沒有被覆蓋。 –

我想說謝謝@DanKreiger & @ katniss.everbean爲有幫助。我已經通過按照步驟katniss給予我的工作。問題是我的jQuery鏈接處於底部，這導致了一個定義問題，導致腳本無法響應。我是Stack Overflow的新手。我不知道我能否給點分數。我會標記爲已解決，再次感謝您的幫助！

來源

2017-08-09 21:02:07

滾動更改徽標引導3

回答

相關問題