[英]jQuery Animate Header on Scroll
I'm building a simple header for a plain HTML5 site. 我正在为普通的HTML5网站构建一个简单的标头。 I'm trying to make the header change background color at a certain .scrollTop()
. 我正在尝试使标题更改某个.scrollTop()
背景颜色。 I know the scroll
part is working, just not the animation. 我知道scroll
部分正在工作,而动画没有。
$(document).ready(function(){
$(window).scroll(function(){
var SCROLL = $(window).scrollTop();
if(SCROLL > 100) {
$('header#header').animate({
background:'#fff'
},300);
}
});
});
You are using just jQuery, please remember that you need external plugins to animate your background color only with jQuery. 您仅使用jQuery,请记住,您需要外部插件才能仅使用jQuery设置背景颜色的动画。
Please check fiddle: 请检查小提琴:
http://jsfiddle.net/m3dis/L06dcg4c/ http://jsfiddle.net/m3dis/L06dcg4c/
I used this plugin: 我用了这个插件:
http://www.bitstorm.org/jquery/color-animation/ http://www.bitstorm.org/jquery/color-animation/
But. 但。
I offer you to use CSS3 transitions and jQuery addClass, removeClass . 我提供给您使用CSS3过渡和jQuery addClass,removeClass的方法 。
Example: 例:
if(SCROLL > 100) {
jQuery('header').addClass('white');
} else if(SCROLL < 100) {
jQuery('header').removeClass('white');
}
http://jsfiddle.net/m3dis/L06dcg4c/1/ http://jsfiddle.net/m3dis/L06dcg4c/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.