Question

我有一段jQuery代码，当用户向下滚动时会改变几种颜色的元素。但是当用户向上滚动页面时，我想切换到原始颜色。它不像我期望的那样工作......

原始代码有效

jQuery(window).scroll(function() 
{
    var scrollTop = jQuery(this).scrollTop(),
    offset = jQuery('#masthead').height() - 55;
    if ( scrollTop < offset ) 
        jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
    else 
        jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
})

也适用的修改代码

})(window.jQuery);
jQuery(window).scroll(function() 
{
    var scrollTop = jQuery(this).scrollTop(),
    offset = jQuery('#masthead').height() - 55;
    if ( scrollTop < offset ) 
        jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
    else 
        jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
        jQuery(".primary-menu a").css({ color: "white" });
})

在第一个if语句杀死脚本时添加额外的css修饰符。

})(window.jQuery);

jQuery(window).scroll(function() 
{
    var scrollTop = jQuery(this).scrollTop(),
    offset = jQuery('#masthead').height() - 55;
    if ( scrollTop < offset ) 
        jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
        jQuery(".primary-menu a").css({ color: "black" });
    else 
        jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
        jQuery(".primary-menu a").css({ color: "white" });
})

Answer 1

我发现您在if和else中缺少大括号。因此，只有if和else之后的第一行才会被执行。而是像这样添加一个支撑：

 .....
 if ( scrollTop < offset ) {
      jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
      jQuery(".primary-menu a").css({ color: "black" });
 }
else {
     jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
     jQuery(".primary-menu a").css({ color: "white" });
 }
 ....

用户滚动时如何更改颜色

1 个答案: