Question

是否可以确定当前在浏览器视图中的哪个div，然后在发生这种情况时触发事件？基本上，我有一个网站，在一个页面上有5-6个部分，我想根据浏览器当前查看的部分来激活事件。我知道我们可以使用hrefs中的#tag直接链接到页面的位置，但这是否可以确定哪个目前在浏览器的主视图中？

Answer 1

是的，你可以这样做。其背后的基本思想是观看滚动并确定用户关注哪个sections。对此的一个很好的猜测通常是视图顶部旁边的部分：

$(document).scroll(function() {
  var $this = $(this),
      scrollTop = $this.scrollTop(),
      // find the section next to the current scroll top
      sections = $(this).find('section'),
      topSection = null,
      minDist = Infinity;

  sections.each(function() {
    // calculate top and bottom offset of the section
    var top = $(this).offset().top,
        bottom = top + $(this).innerHeight(),
        // only use the minimum distance to the scroll top
        relativeDistance = Math.min(
          Math.abs(top - scrollTop), 
          Math.abs(bottom - scrollTop)
        );
    // in case the distance is smaller than
    // the previous one's replace it
    if (relativeDistance < minDist) {
      minDist = relativeDistance;
      topSection = this;
    }
  });

  // flip the 'top' class from current to now next one
  $('section.top').removeClass('top');
  $(topSection).addClass('top');    
});

你可以在Play Webframework's Homepage

看到一个非常好的例子

如果这不是您想要的，您可以观察任何元素的完整offset或position，并使用$(window).innerWidth()或$(window).innerHeight()将其与当前视口进行比较

<强>更新添加了jsbin以查看其实际效果。享受;）

jQuery可以确定哪些div目前在用户的浏览器视图中？

1 个答案: