[英]jquery change opacity and height on scroll
我目前正在嘗試寫一些js。 我的導航將漸變設置為背景。 當向下滾動一定數量時,我希望背景的高度從漸變更改為具有0.85不透明度(動畫)的純色。
這是我的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 */
}
希望可以有人幫幫我
您的代碼很好!
只需創建兩個單獨的類,然后替換$('#navigation').css({height: '92px'});
通過$('#navigation').addClass("flatColored");
和$('#navigation').removeClass("flatColored");
在“其他”中。
而不是在CSS中使用#navigation{ ...}
,而應使用.gradientColored{...} .flatcolored{...}
並在您的html中: <div id="navigation" class="gradientColored">...</div>
覆蓋'flatColored類中的background
屬性。
根據您的代碼在chrome上進行了測試。 工作正常 !
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.