jquery更改不透明度和滚动上的高度 [英] 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')。在你的css中使用
#navigation {...}
,而不是在你的css中使用
<
.gradientColored {...} .flatcolored {...}
$ c>< div id =navigationclass =gradientColored> ...< / div>
background
属性。
根据您的代码在Chrome上测试。工作正常!
I'm currently trying to write a little js. My navigation has a gradient set as background. I want the background to change in height and from a gradient to a flat color with 0.85 opacity (animated) when I scroll down a certain amount.
here's my js code
$(window).scroll(function(){
if ($(window).scrollTop() >= 600){
$('#navigation').css({height: '92px'});
} else {
$('#navigation').css({height: '142px'});
}
});
here's the 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 */
}
hope someone can help me
Your code is good !!
Just create two separate class and replace your $('#navigation').css({height: '92px'});
by $('#navigation').addClass("flatColored");
and $('#navigation').removeClass("flatColored");
in the 'else'.
instead of having #navigation{ ...}
in your css, use .gradientColored{...} .flatcolored{...}
and in your html : <div id="navigation" class="gradientColored">...</div>
Override the background
properties in the 'flatColored class.
Tested on chrome, based on your code. Works fine !
这篇关于jquery更改不透明度和滚动上的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!