Получение координат элемента при прокрутке страницы - PullRequest
Новая
       7

Получение координат элемента при прокрутке страницы

6 голосов
/ 23 марта 2012

У меня возникла эта проблема, когда у меня есть набор из 6 UL, имеющих общий класс x. Каждый из них состоит из определенного раздела страницы. Теперь у меня есть 6 меню, которые связаны с каждым из разделов. нужно сделать, это выделить меню, когда соответствующий раздел находится в представлении пользователей. Для этого я подумал, что это может быть jQuery position (); или offset (); могло бы помочь, но они дают верхнюю и левую часть элемента. Я также пытался использовать jQuery viewport плагин, но, видимо, порт просмотра большой, он может отображать более одного UL одновременно, поэтому я не могу применить логику, специфичную для элемента. Я не знаком с этим, но что-то меняет элемент при прокрутке? Если да, то как получить к нему доступ?

Пожалуйста, поделитесь своим мнением.

С уважением Химаншу Шарма.

Ответы [ 3 ]

5 голосов
/ 02 апреля 2012

Это очень легко сделать, используя jQuery и фиктивный фиксированный HTML-блок, который поможет вам найти текущую позицию окна просмотра.1006 *

Вы также можете сделать нечто подобное с плагином jQuery вместе с селектором : first : 

$(window).on("scroll load",function(){  
    $(".title:in-viewport:first").each(function(){
        var index = $(this).index(".title");
        $(".current").removeClass('current')        
        $("#menu li").eq(index).addClass('current')
    }); 
})
0 голосов
/ 02 апреля 2012

Посмотрим, правильно ли я понял.У вас есть достаточно длинная страница для прокрутки, и есть элемент, который, когда он появляется в окне просмотра, вы хотите что-то с ним сделать.Таким образом, единственное событие, которое точно срабатывает в момент, когда элемент попадает в область просмотра, - это «прокрутка».Поэтому, если элемент находится на странице, а прокрутка находится в области просмотра, вам нужно привязать действие к событию прокрутки, чтобы проверять, присутствует ли элемент в представлении каждый раз, когда событие инициируется.Примерно так: 

$(window).scroll(function() {
   check_element_position();
});

Теперь, чтобы вы знали, находится ли элемент в окне просмотра, вам нужно 3 вещи.Верх смещения этого элемента, размер области просмотра и верхняя часть прокрутки окна.Должно выглядеть примерно так: 

function check_element_position() {
   var win = $(window);
   var window_height = win.height();
   var element = $(your_element);
   var elem_offset_top = element.offset().top;
   var elem_height = element.height();
   var win_scroll = win.scrollTop();
   var pseudo_offset = (elem_offset_top - win_scroll);
   if (pseudo_offset < window_height && pseudo_offset >= 0) {
      // element in view
   }
   else {
      // elem not in view
   }
}

Здесь (elem_offset_top - win_scroll) представляет позицию элемента, если не было прокрутки.Таким образом, вам просто нужно проверить, больше ли вершина смещения элемента, чем окно просмотра окна, чтобы увидеть, виден он или нет.Наконец, вы можете быть более точными в своих вычислениях, добавив высоту элемента (переменная уже там), потому что код, который я только что сделал, вызовет событие, даже если элемент видим только на 1 пиксель.

Примечание:Я сделал это всего за пять минут, так что вам, возможно, придется кое-что исправить, но это дает вам чертовски хорошее представление о том, что происходит;)

Не стесняйтесь комментировать и задавать вопросы

0 голосов
/ 27 марта 2012
  1. Вы можете получить ширину и высоту области просмотра с помощью $(document).width() и $(document).height()
  2. Вы можете получить количество пикселей, которые пользователь прокручивает с помощью $(document).scrollTop() и $(document).scrollLeft
  3. Комбинируя 1 и 2 , вы можете вычислить, где прямоугольник области просмотра равен
  4. . Вы можете получить прямоугольник элемента, используя $(element).offset(), $(element).width() и $(element).height()
  5. Таким образом, вам остается только определить, содержит ли прямоугольник области просмотра (или взаимодействует) прямоугольник элементов

Таким образом, весь код может выглядеть следующим образом: 

/**
 * Check wether outer contains inner
 * You can change this logic to matches what you need
 */
function rectContains(outer, inner) {
    return outer.top <= inner.top &&
        outer.bottom >= inner.bottom &&
        outer.left <= inner.left &&
        outer.right >= inner.right;
}

/**
 * Use this function to find the menu related to <ul> element
 */
function findRelatedMenu(element) {
    return $('#menu-' + element.attr('id'));
}

function whenScroll() {
    var doc = $(document);
    var elem = $(element);
    var viewportRect = {
        top: doc.scrollTop(),
        left: doc.scrollLeft(),
        width: doc.width(),
        height: doc.height()
    };
    viewportRect.bottom = viewportRect.top + viewportRect.height;
    viewportRect.right = viewportRect.left + viewportRect.width;

    var elements = $('ul.your-class');
    for (var i = 0; i < elements.length; i++) {
        var elem = $(elements[i]);
        var elementRect = {
            top: elem.offset().top,
            left: elem.offset().left,
            width: elem.width(),
            height: elem.height()
        };
        elementRect.bottom = elementRect.top + elementRect.height;
        elementRect.right = elementRect.left + elementRect.width;

        if (rectContains(viewportRect, elementRect)) {
            findRelatedMenu(elem).addClass('highlight');
        }
    }
}

$(window).on('scroll', whenScroll);
...