Может ли jQuery определить, какие div в настоящее время отображаются в браузере пользователя?

Question

Можно ли определить, какой div в настоящее время находится в поле зрения браузера, а затем запустить событие, когда это происходит? По сути, у меня есть веб-сайт с 5-6 разделами на одной странице, и я хочу запускать события в зависимости от того, какой раздел отображается в браузере. Я знаю, что мы можем напрямую ссылаться на позиции страницы с помощью тега # в hrefs, но можно ли определить, какой в ​​данный момент находится в главном окне браузера?

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

Если это не совсем то, что вы хотите, вы можете наблюдать полный offset или position любого элемента и сравнивать его с текущим окном просмотра, используя $(window).innerWidth() или $(window).innerHeight()

UPDATE Добавлен jsbin , чтобы увидеть его в действии. Наслаждайтесь;)