如何在向下滾動時更改徽標？

-1

我有一個問題，我無法解決我自己，所以我需要你的幫助。在my site上，我已經集成了JQuery，它可以在向下滾動時更改標題背景和顏色，並且運行良好。但問題是，我也希望徽標在有人向下滾動時更改爲黑色版本。我已經tryed這JQ：如何在向下滾動時更改徽標？

jQuery(document).scroll(function(){ 
if(jQuery(this).scrollTop() > 300) 
{ 
    jQuery('#navigation').css({"background":"white"}); 
    jQuery('.menu-item').css({"color":"black"}); 
    jQuery('.site_logo').css({"-webkit-filter":"invert(.8)"}); 
    jQuery('.site_logo').css({"filter":"invert(.8)"}); 
} else { 
    jQuery('#navigation').css({"background":"transparent"}); 
    jQuery('.menu-item').css({"color":"white"}); 
} 
});

什麼反轉白顏色爲黑色，而紅色轉化爲綠色，所以它不是如我所料。我有黑色版徽標，所以我問你，如何在有人向下滾動時更改黑色徽標？

來源

2016-12-15 Dora

你不滾動回頂後去除過濾器。更改您的JS像

jQuery(document).scroll(function(){ 
    if(jQuery(this).scrollTop() > 300){ 
    jQuery('#navigation').css({"background":"white"}); 
    jQuery('.menu-item').css({"color":"black"}); 
    jQuery('.site_logo').css({"-webkit-filter":"invert(.8)","filter":"invert(.8)"}); 
    } else { 
    jQuery('#navigation').css({"background":"transparent"}); 
    jQuery('.menu-item').css({"color":"white"}); 
    jQuery('.site_logo').css({"-webkit-filter":"none","filter":"none"}); 
    } 
});

也有上滾動改變圖像的更好的方法（用於很好看），所以你可以後喜歡

jQuery(document).scroll(function(){ 
    if(jQuery(this).scrollTop() > 300){ 
    jQuery('#navigation').css({"background":"white"}); 
    jQuery('.menu-item').css({"color":"black"}); 
    jQuery('.site_logo').attr('src','path/to/logo/after/scroll') 
    } else { 
    jQuery('#navigation').css({"background":"transparent"}); 
    jQuery('.menu-item').css({"color":"white"}); 
    jQuery('.site_logo').attr('src','path/to/logo/initially/') 
} 
});

滾動之前實現正是你想要的相同設計的標誌

來源

2016-12-15 10:54:42

這可以工作，但紅色反轉爲綠色。檢查我的網站（列在第一篇文章），並會看到我在說什麼。 – Dora

你的第二個修改過的JQ完成了這項工作。 :)謝謝 – Dora

您的歡迎:) –

你的意思是你如何訪問src屬性？

$('.site_logo').attr('src', 'BLACKLOGO.png'); 

jQuery(document).scroll(function(){ 
    if(jQuery(this).scrollTop() > 300) 
    { 
     jQuery('#navigation').css({"background":"white"}); 
     jQuery('.menu-item').css({"color":"black"}); 
     jQuery('.site_logo').attr('src', 'http://deilbeatz.com/wp-content/uploads/2016/12/DeilBeatzwhite.png'); 
    } else { 
     jQuery('#navigation').css({"background":"transparent"}); 
     jQuery('.menu-item').css({"color":"white"}); 
     jQuery('.site_logo').attr('src', 'http://deilbeatz.com/wp-content/uploads/2016/12/Deil-Beatz-‌menu-logo-black.png'); 
    } 
});

希望幫助，如果不是讓我知道你需要什麼，我會盡力幫助

來源

2016-12-15 10:44:45 Craig

所以，只要把它放在白色和黑色徽標的if和else狀態下 – Craig

我在JQ中插入了這一行： 'jQuery（'。site_logo'）。attr（'src'，'http：// deilbeatz。 com/wp-content/uploads/2016/12/Deil-Beatz-menu-logo-black.png'）;' 但是t他的更新也是我的主要標誌黑色標題..所以如何使用這個黑色的標誌，只在白色背景？ – Dora

只把它放在ELSE位，並把$（'。site_logo'）。attr（'src'，'http://deilbeatz.com/wp-content/uploads/2016/12/DeilBeatzwhite.png'）;在IF的第一部分，你在那裏做黑色相關的風格 – Craig

如何在向下滾動時更改徽標？

回答

相關問題