我有两个要合并的代码,但是不确定实际的正确标记以及如何正确编写。
function EasyPeasyParallax() {
scrollPos = $(document).scrollTop();
$('#header_nav').css({
'background-color': 'rgba(0, 0, 0, 0.8)'
//'opacity': 0.5+(Math.min(scrollPos/100,1))
});
};
$(function(){
$('body').bind('mousewheel',EasyPeasyParallax);
});
当我向下滚动页面时,不透明度选择器起作用。但是,我只想定位div的背景色。如何将“background-color”选择器与scrollPos / 100代码结合使用?
最佳答案
您可以将此代码用于滚动事件上的animationg background-color
的opacity
属性。
jsFiddle Demo
function EasyPeasyParallax() {
var scrollPos = $(document).scrollTop();
var targetOpacity = 1;
scrollPos < 1000 ? targetOpacity = '0.'+ (scrollPos*100)/10 : targetOpacity;
$('span').css({
'background-color': 'rgba(0, 0, 0, '+ targetOpacity +')'
});
console.log(scrollPos,targetOpacity);
};
$(function(){
$(window).scroll(function() {
EasyPeasyParallax();
});
});
--
如果要使用jQuery动画
background-color
,请检查以下答案:Special color transition effect with pure jQuery animation // no ui or other libary