Question

当我在某些div元素下面时，我试图更改固定标题上的文本颜色。这是我的代码。

$(window).scroll(function () {
    $('.white-header').each(function() {
        scrollPosition = $(window).scrollTop();
        elementTop = $(this).offset().top;
        elementBottom = $(this).outerHeight() + elementTop;
        if (scrollPosition > elementTop && scrollPosition < elementBottom) {
            $('#header').css('color','#fff');
        }
        if (scrollPosition < elementTop || scrollPosition > elementBottom) {
            $('#header').css('color','#222');
        }
    });
});

问题是它似乎只适用于一个元素。如果只有一个div与类.white-header一切都很好。但是当有多个人工作时（似乎是最后一个有效）。

这是显示问题的JS Fiddle。

Answer 1

在循环.white-header个元素时，当第一个元素与条件匹配时，文本颜色将更改为白色。但是，第二个元素与条件不匹配，因此文本颜色会立即变回黑色。不应检查所有元素是否与条件匹配，而应检查它们中是否有任何元素。

试试这段代码：

$(window).scroll(function() {
  if (Array.prototype.some.call($('.white-header'), function(element) {
    scrollPosition = $(window).scrollTop();
    elementTop = $(element).offset().top;
    elementBottom = $(element).outerHeight() + elementTop;
    if (scrollPosition > elementTop && scrollPosition < elementBottom) {
      return true;
    }
    else {
      return false;
    }
  })) {
    $('#header').css('color', '#fff');
  } else {
    $('#header').css('color', '#222');
  }
});

请参阅updated JS Fiddle。

您也可以在使用return false查找匹配元素后中断循环，如下所示：

$(window).scroll(function() {
  $('.white-header').each(function() {
    scrollPosition = $(window).scrollTop();
    elementTop = $(this).offset().top;
    elementBottom = $(this).outerHeight() + elementTop;
    if (scrollPosition > elementTop && scrollPosition < elementBottom) {
      $('#header').css('color', '#fff');
      return false;
    }
    else {
      $('#header').css('color', '#222');
    }
  });
});

Answer 2

您有两个.white-header元素。在循环.white-header元素时，当滚动位置与条件不匹配时，文本颜色将为#222。因此，您需要检查是否阻止了重复的css方法调用。

$(window).scroll(function() {
  var _isOnWhiteHeader = false;
  $('.white-header').each(function() {
    scrollPosition = $(window).scrollTop();
    elementTop = $(this).offset().top;
    elementBottom = $(this).outerHeight() + elementTop;

    if (scrollPosition > elementTop && scrollPosition < elementBottom) {
      $('#header').css('color', '#fff');
      _isOnWhiteHeader = true;
    }
    else if(!_isOnWhiteHeader){
      $('#header').css('color', '#222');
    }
  });
});

<强> Fiddle

使用jQuery在超过某个div时更改标题文本颜色

2 个答案: