jquery更改不透明度和滾動高度

我目前正在嘗試寫一點js。我的導航具有設置爲背景的漸變。當我向下滾動一定數量時，我想讓背景在高度上從漸變變爲具有0.85不透明度（動畫）的平坦顏色。jquery更改不透明度和滾動高度

，這裏是我的js代碼

$(window).scroll(function(){ 
if ($(window).scrollTop() >= 600){ 
    $('#navigation').css({height: '92px'}); 
} else { 
    $('#navigation').css({height: '142px'}); 
    } 
});

這裏的CSS

#navigation { 

height: 142px; 
width: 1350px; 
position: fixed; 
z-index: 2000; 

background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */

}

希望有人能幫助我

來源

2013-05-14 Jobes

你的代碼是好！

只需創建兩個單獨的類，並用$('#navigation').addClass("flatColored");和$('#navigation').removeClass("flatColored");替換$('#navigation').css({height: '92px'});中的'else'。

，而不是在你的CSS有#navigation{ ...}，使用.gradientColored{...} .flatcolored{...}

，並在你的HTML：<div id="navigation" class="gradientColored">...</div>

覆蓋的background在「flatColored類屬性。

根據您的代碼在Chrome上進行測試。工作正常！

來源

2013-05-15 15:37:12 TCHdvlp

謝謝，這工作完美 – Jobes

jquery更改不透明度和滾動高度

回答

相關問題