Question

我需要检查菜单（＃main-header）的背景色，该背景色必须与加载页面和滚动时的部分（.section）的颜色相同，目前，我仅管理滚动事件。加载页面后，菜单的背景颜色与该部分的背景颜色不同。 JSFiddle：https://jsfiddle.net/stellac/w8xbzmne/3/

这是我的代码：

    <script type="text/javascript">
    jQuery(function($)
    {    
        $(window).scroll(function ()
        {
            if ($('.section').css('background-color') === '#fff') {
                $('#main-header').css('background-color','#fff');
            } else {
                $('#main-header').css('background-color','#001a22');
            }
        });
    });
</script>

Answer 1

您可以创建一个负责更改颜色的函数，并在页面加载时和滚动事件中调用该函数。所以尝试这样的事情

jQuery

jQuery(function($) {
  changeColor();      //calling on page load
  $(window).scroll(function() {
    changeColor();    // calling in scroll event
  });
});

function changeColor() {
  if ($(".section").css("background-color") === "#fff") {
    $("#main-header").css("background-color", "#fff");
  } else {
    $("#main-header").css("background-color", "#001a22");
  }
}

jQuery更改并控制加载和滚动的颜色

1 个答案: