在jquery上滾動更改一個div的多個css元素

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

});