在jquery上滚动更改一个div的多个css元素

我是jquery的新手，尽力学习尽可能多的自己，但我被困在这里。我正在尝试获取一个位于固定位置的容器，以调整不透明度并更改滚动上的字体颜色。我使用下面的代码获得了不透明度部分。如何合并其它CSS改变这个喜欢改变从#000000字体的颜色#ffffff在jquery上滚动更改一个div的多个css元素

jQuery(function ($) { 
    function EasyPeasyParallax() { 
    var scrollPos = $(document).scrollTop(); 
    var targetOpacity = 1; 
    scrollPos < 400 ? targetOpacity = '0.' + (scrollPos * 100)/10 : targetOpacity; 
    $('.headcon').css({ 
     'background-color': 'rgba(255, 255, 255, ' + targetOpacity + ')' 
    }); 
    console.log(scrollPos, targetOpacity); 
    }; 
    $(function() { 
    $(window).scroll(function() { 
     EasyPeasyParallax(); 
    }); 
    }); 
});

来源

2014-11-09 robgfl23

你不透明度的代码是不正确的。你不应该在三元运算符的第二部分有一个任务。要回答您的原始问题，只需将更多属性设置附加到传递给css函数的对象。

jQuery(function ($) { 

    function EasyPeasyParallax() { 
     var scrollPos = $(document).scrollTop(); 
     // use the result of ternary operator to assign the opacity by 
     // rather than assigning in the second operator 
     var targetOpacity = scrollPos < 400 
           ? (scrollPos*100)/10 
           : 1; 
     $('.headcon').css({ 
      'background-color': 'rgba(255, 255, 255, '+ targetOpacity +')', 
      'font-color': '#ffffff' 
      }); 

     console.log(scrollPos,targetOpacity); 
    }; 

    $(function(){ 
     $(window).scroll(function() { 
      EasyPeasyParallax(); 
     }); 
    }); 

});

来源

2014-11-09 06:07:59 tvanfosson

非常感谢你的帮助:)最后一个问题，如果你不介意。当我回滚到顶部字体保持黑色。我将如何让它恢复到原来的白色？ – robgfl23 2014-11-09 06:15:18

@ robgfl23关闭我的头顶我想说，你想缩放颜色，以便它通过滚动变暗/变亮。或者，您可以在滚动位置到达特定点后，将其在黑/白之间翻转。 'var fontColor = scrollPos <400？ '#ffffff'：'＃000000';'然后在'css'函数中使用'fontColor'。 – tvanfosson 2014-11-09 15:30:04

在jquery上滚动更改一个div的多个css元素

回答

相关问题