在滾動時，徽標顏色發生變化，但滾動備份保持不變

我在創建固定標題的地方，徽標是平坦的白色。在滾動時，它會更改爲全綵色標誌。但是，當滾動回頂端時，它保持相同的彩色標誌，而不是回到白色。這裏是代碼（和一支筆）在滾動時，徽標顏色發生變化，但滾動備份保持不變

$(function() { 
$(window).scroll(function() {  
    var navlogo = $('.nav-logo-before'); 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 1) { 
     navlogo.removeClass('.nav-logo-before').addClass('nav-logo-after'); 

    } else { 
     navlogo.removeClass('.nav-logo-after').addClass('nav-logo-before');    
    } 

});

}）;

http://codepen.io/bradpaulp/pen/gmXOjG

來源

2017-03-16 Brad

要刪除的類nav-logo-before，因此函數運行第二次，它不能與nav-logo-before找到任何元素。

只要給第二類的navlogo元素，並使用在第3行像這樣：

var navlogo = $('.second-class');

工作示例： http://codepen.io/anon/pen/ryYajx

來源

2017-03-16 14:44:24 modu

謝謝！這工作完美！（我upvoted您的評論，但它不會因爲我是新的stackoverflow） – Brad

不客氣。如果您認爲這個解決方案是正確的，那麼您應該將其標記爲「接受的答案」。該按鈕位於downvote圖標下方。 – modu

你得到使用

var navlogo = $('.nav-logo-before');

但隨後修改類是「navlogo-後」的navlogo變量，函數被調用你這樣下次就不會能夠使用jquery選擇標識，因爲它不再具有'.nav-logo-before'class。

例如，您可以將標識添加到徽標並使用它來選擇徽標。

除此之外，removeClass('.nav-logo-before')應該removeClass('nav-logo-before')無類名之前的點。

來源

2017-03-16 14:44:18

不需要添加點。在類名removeClass和addClass面前：使用此：

navlogo.removeClass('nav-logo-before')

其次，要刪除您正在使用以獲得在首位的元素的類。

我有一個更新的codepen，看是否適合你的需要：http://codepen.io/anon/pen/ZeaYRO

來源

2017-03-16 14:45:31 surajck

這只是其中一個問題 –

更新了答案 – surajck

好，我刪除了downvote，我仍然希望OP看到我的答案，因爲我認爲還有一些更重要的信息。 –

的問題是，你消除nav-logo-before，然後要選擇這樣的類元素，但它不存在。

我已經構建了代碼來避免它。

的另一個問題是，你使用點在removeClass('.before')，而應該是removeClass('before') - 沒有點

$(function() { 
 

 
    var navlogo = $('.nav-logo'); 
 
    
 
    $(window).scroll(function() { 
 
     var scroll = $(window).scrollTop(); 
 
    
 
     if (scroll >= 1) { 
 
      navlogo.removeClass('before').addClass('after'); 
 
      
 
     } else { 
 
      navlogo.removeClass('after').addClass('before'); 
 
     } 
 
    }); 
 
});

body { 
 
\t background-color: rgba(0,0,0,.2); 
 
} 
 
.space { 
 
\t padding: 300px; 
 
} 
 
.before { 
 
    content: url(https://image.ibb.co/kYANyv/logo_test_before.png) 
 
} 
 

 
.after { 
 
    content: url(https://image.ibb.co/jYzFJv/logo_test_after.png) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
\t <img class="nav-logo before"> 
 
</div> 
 
<div class="space"> 
 
</div>

來源

2017-03-16 14:45:57 Arkej

有幾件事情在這裏：

1）開始使用一個.nav-logo-在課前，但是當標識變黑時，您將刪除該類，然後嘗試使用不存在的類選擇器來獲取相同的元素

2）removeClass('.nav-logo-before')不同於removeClass('nev-logo-before)，請注意」。在「第一選擇。

3）你得到的每一個滾動事件中使用$('.selector')元素，這可能是一個性能問題，最好對其進行緩存的頁面加載，然後使用存儲在內存中的元素

4）聽取滾動事件不是一個好習慣，因爲這可能會對性能要求太高，通常使用會更好，然後檢查滾動位置是否已更改。使用滾動事件可能會導致您向上滾動快速滾動事件沒有發生0，因此您的標誌不會改變。隨着這是不可能發生

$(function() { 
 
    var navlogo = $('.nav-logo'); 
 
    var $window = $(window); 
 
    var oldScroll = 0; 
 
    function loop() { 
 
     var scroll = $window.scrollTop(); 
 
     if (oldScroll != scroll) { 
 
      oldScroll = scroll; 
 
      if (scroll >= 1) { 
 
       navlogo.removeClass('nav-logo-before').addClass('nav-logo-after'); 
 
      } else { 
 
       navlogo.removeClass('nav-logo-after').addClass('nav-logo-before');  
 
      } 
 
     } 
 
     requestAnimationFrame(loop); 
 
    } 
 
    requestAnimationFrame(loop); 
 
});

body { 
 
\t background-color: rgba(0,0,0,.2); 
 
} 
 
.space { 
 
\t padding: 300px; 
 
} 
 
.nav-logo-before { 
 
    content: url(https://image.ibb.co/kYANyv/logo_test_before.png) 
 
} 
 

 
.nav-logo-after { 
 
    content: url(https://image.ibb.co/jYzFJv/logo_test_after.png) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
\t <img class="nav-logo nav-logo-before"> 
 
</div> 
 
<div class="space"> 
 
</div>

來源

2017-03-16 14:46:03

在滾動時，徽標顏色發生變化，但滾動備份保持不變

回答

相關問題