「.hasClass」從頂部滾動和類添加當if語句不工作

Question

<nav id="navbar-main" class="navbar navbar-default navbar-static-top main-nav" data-spy="affix" data-offset-top="100"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#"><img id="#head-logo" src="images/logo.png"></a> 
</div> 

上面導航欄的變化 - ‘粘貼’，我想改變導航欄裏面品牌形象的來源時，導航欄有班級「詞綴」。 但下面不工作 -

$(document).ready(function() { 
     if ($("#navbar-main").hasClass('affix')) { 
      $(".navbar-brand img").attr('src','second.jpg'); 
    } 
    else { 
     $(".navbar-brand img").attr('src','images/logo.png'); 
    } 
}); 

以下工作 -

$(window).scroll(function(){ 
     var navscroll = $(window).scrollTop(); 
     if(navscroll >= 50) { 
      $(".navbar-brand img").attr('src','second.jpg'); 
    } 
    else { 
     $(".navbar-brand img").attr('src','images/logo.png'); 
    } 
}); 

Answer 1

如果添加的類/上滾動刪除，你需要把你的代碼在scroll回調並在之後運行它該類已被添加/刪除（如果您將類更改爲該類）。 ready僅在加載和解析頁面時運行一次。

因此，舉例來說，你可以這樣做：

function updateLogo() { 
    if ($("#navbar-main").hasClass('affix')) { 
      $(".navbar-brand img").attr('src','second.jpg'); 
    } 
    else { 
     $(".navbar-brand img").attr('src','images/logo.png'); 
    } 
} 
$(updateLogo); 
$(window).on("scroll", updateLogo); 

...但是隻有當你知道這些代碼做類更新已註冊了scroll處理程序（因爲處理程序按順序執行，所以如果它已經在上面的代碼運行之前被註冊了，那麼你的註冊是在之後的）。如果您不知道這一點，則需要採取措施確保在課程更新後致電updateLogo。

---

從您的評論：

我不想使它工作使用滾動，但上課的時候改變...

有沒有「階級變」事件。你必須確定它是什麼導致班級變化，然後觸發什麼。或者輪詢（blech）。 :-)

或者做理性的事情，並使用CSS，而不是爲自己做更多的工作。 :-)

img.affixed { 
    display: none; 
} 
.affix img.normal { 
    display: none; 
} 
.affix img.affixed { 
    display: inline; 
} 

...其中img class="normal"是images/logo.png形象，img class="affixed"是second.jpg圖像。