Question

我遇到这种情况：

HTML：

<div class="select">Text</div>
<div class="select">Text</div>
<div class="select">Text</div>
<div class="select">Text</div>

JS：

$(window).scroll(function(){
    var wScroll = $(this).scrollTop();
    if (wScroll > $('.select').offset().top) {
        $('.select').css('color','red');
    }
});

当我滚动当然它选择所有具有类.element的div，但我想要的只是目标div.select是offset（）。top = 0，而不是其他。

Answer 1

我会使用标记类，在滚动内容时将其删除，然后将其添加到.select为offset().top的第一个>= wScroll元素中：

// Create a bunch of div.select
var n;
for (n = 0; n < 100; ++n) {
  $("<div class=select>" + n + "</div>").appendTo(document.body);
}

// Make the top one always red
$(window).scroll(function(){
  var wScroll = $(this).scrollTop();
  $(".select.top").removeClass("top");
  $(".select").each(function() {
    var $this = $(this);
    if ($this.offset().top >= wScroll) {
      $this.addClass("top");
      return false;
    }
  });
});

.top {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以使用$this.offset().top + $this.height()来匹配第一个，即使它只是部分可见：

// Create a bunch of div.select
var n;
for (n = 0; n < 100; ++n) {
  $("<div class=select>" + n + "</div>").appendTo(document.body);
}

// Make the top one always red
$(window).scroll(function(){
  var wScroll = $(this).scrollTop();
  $(".select.top").removeClass("top");
  $(".select").each(function() {
    var $this = $(this);
    if ($this.offset().top + $this.height() >= wScroll) {
      $this.addClass("top");
      return false;
    }
  });
});

.top {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

准确选择具有offset.top的特定类的div

1 个答案: