一些屬性沒有改變，但其他屬性

我製作了代碼，可以在向下滾動時更改標題不透明度，但我希望它在向下滾動時更改背景顏色。不知道爲什麼，但它不會更改此屬性，但會更改其他屬性（如不透明度和轉換持續時間）。爲什麼它不改變背景顏色？上傳到這個網站的時候，但不知道一些屬性沒有改變，但其他屬性

的代碼輸入演示具有顯示錯誤，爲什麼，因爲它工作在我的網站罰款：

<script type="text/javascript"> 
 
var headerWrap = $('#header-wrap'); 
 
$(window).scroll(function() { 
 
    headerWrap.addClass('scroll-opacity-change'); 
 
    if($(this).scrollTop() === 0) { 
 
     headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
}); 
 
</script>

#header-wrap{ 
 
\t background:#D6ECFF; 
 
\t width:100%; 
 
\t height:auto; 
 
\t border-bottom: 1px solid #CCC; 
 
\t position:fixed; 
 
\t top:0;/* may not be needed but no harm in having */ 
 
\t z-index:100000; 
 
\t /* margin:0 auto; needed? */ 
 
} 
 
.scroll-opacity-change{ 
 
\t opacity:0.7; 
 
\t -webkit-transition-duration: 1.0s; /* Safari */ 
 
    transition-duration: 1.0s; 
 
\t background:#777a7c; 
 
}

來源

2017-01-27 user3760941

嘗試使用這個'背景：＃！777a7c重要;'。 – abhishekkannojia

或者只是'＃header-wrap.scroll-opacity-change'而不是使用'！important' – junkfoodjunkie

！重要的永遠不應該是答案。 – epascarello

在您的例子CSS屬性規則基於特異性應用。

閱讀：http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

的ID是更具體的比類是除元素更具體。

由於這是越來越應用從ID類的背景屬性，你將不得不要麼使背景屬性在類！重要（重要性已經超過特異性優先），或使用＃頭，wrap.scroll -opacity變化

var headerWrap = $('#header-wrap'); 
 
$(window).scroll(function() { 
 
    headerWrap.addClass('scroll-opacity-change'); 
 
    if($(this).scrollTop() === 0) { 
 
     headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
});

#header-wrap{ 
 
\t background:#D6ECFF; 
 
\t width:100%; 
 
\t height:100px;; 
 
\t border-bottom: 1px solid #CCC; 
 
\t position:fixed; 
 
\t top:0;/* may not be needed but no harm in having */ 
 
\t z-index:100000; 
 
\t /* margin:0 auto; needed? */ 
 
} 
 
#header-wrap.scroll-opacity-change{ 
 
\t opacity:0.7; 
 
    background:#000; 
 
\t -webkit-transition-duration: 1.0s; /* Safari */ 
 
    transition-duration: 1.0s; 
 
\t 
 
} 
 

 
body 
 
{ 
 
    height:1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header-wrap"> 
 
</div>

來源

2017-01-27 13:59:28 Deep

你有specificity問題。 id選擇器比類選擇器具有更高的特異性。所以你需要讓類選擇器具有更高的特異性。你可以通過將id添加到選擇器來實現。

變化

.scroll-opacity-change{

到

#header-wrap.scroll-opacity-change {

來源

2017-01-27 13:59:38 epascarello

一些屬性沒有改變，但其他屬性

回答

相關問題