Question

我是jquery的新手并尽可能多地学习，但我被困在这里。我试图让一个处于固定位置的容器调整不透明度并在滚动时更改字体颜色。我使用下面的代码得到了不透明度部分。如何将其他css更改与此结合使用，例如将字体颜色从#000000更改为#ffffff

 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();
    });
  });
});

Answer 1

您的不透明度代码不正确。你不应该在三元运算符的第二部分有一个赋值。要回答原始问题，只需将更多属性设置附加到传递给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();
        });
    });

});

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

1 个答案: