Эффективный способ выбора элементов, затрагивающих верхний край окна просмотра

Что было бы эффективным с точки зрения вычислительной мощности способом выбора элементов, затрагивающих верхний край окна просмотра окна браузера при прокрутке страницы?Эффективный способ выбора элементов, затрагивающих верхний край окна просмотра

См. Прикрепленное изображение. Зеленые элементы выбираются, потому что они касаются верхнего края.

scrolling

UPDATE

Пример того, как я буду использовать это исчезать элементы, которые идут за кадром. На странице могут быть сотни. Представьте себе страницу, такую как Pinterest. Вычисление смещения и scrollTop для сотен из них по скорости прокрутки, даже если дросселирование все еще кажется действительно неэффективным.

источник

2011-12-27 Aen Tan

существует несколько подходов можно предпринять, чтобы знать, какой из них является наиболее оптимальным: будет ваш сценарий знать имена всех элементов, которые вы хотите обнаружить (т.е. это фиксированное кол-во. элементы)? – mattacular

См. Обновление по моему вопросу. –

Я знаю, что это старый вопрос, но почему бы просто не иметь элемент css, который является градиентом, который идет от вашего фонового цвета до 0% непрозрачности, зафиксированного в верхней части экрана с z-индексом 99999 или что-то в этом роде? Не нужно было загружать лишние js или что-то еще. Просто мысль. – Jacques

Это то, что я придумал. Я думаю, что это можно улучшить, кэшируя значения scrollTop, но это очень хорошо. Я включил рамки для кеширования, но не код реализации. Я также только выполнил прокрутку вниз, чтобы скрыть div. Я оставил просмотр их на upscroll как упражнение для вас.

Когда прокручивается окно, мы получаем последний скрытый div. Мы знаем, что все до этого div уже скрыто. Затем используйте «пока следующий элемент с экрана» скрыть его. Как только div не выключается, мы прерываем работу. Таким образом, экономия времени от итерации по всему списку.

http://jsfiddle.net/kkv3h/2/

//track whether user has scrolled up or down 
var prevScrollTop = $(document).scrollTop(); 

$(document).scroll(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > prevScrollTop) { 
     //down 
     var lasthiddenbox = $('.fadeboxhidden:last'); 
     var nextbox = (lasthiddenbox.length > 0) ? lasthiddenbox.next('.fadebox') : $('.fadebox:first'); 
     while (nextbox.length) { 
      console.log('box: ' + nextbox.offset().top + ' scroll: ' + currentScrollTop); 
      if (nextbox.offset().top < currentScrollTop) { 
       nextbox.animate({ opacity: 0 }, 3000).addClass('fadeboxhidden'); 
      } 
      else { return; } 
      nextbox = nextbox.next('.fadebox:first'); 
     }   
    } else { 
     //up   
    } 
    prevScrollTop = currentScrollTop ; 
}); 

//create an object to hold a list of box top locations 
var boxtops = new Object; 


//gather all boxes and store their top location 
$('.fadebox').each(function(index) {  
    //you may want to dynamically generate div ids here based on index. I didn't do this 
    //because i was already using the id for positioning. 
    var divid = $(this).prop('id'); 
    boxtops[divid] = $(this).offset().top; 
    //console.log(boxtops[divid]);  
});

источник

2011-12-28 00:16:10 mrtsherman

Я думаю, что лучший способ состоял бы в том, чтобы вы могли отмечать элементы, которые вы хотите определить с помощью тестирования, с помощью какого-либо класса, например «hit-test-visible» или что-то в этом роде. Затем для этих элементов в событии прокрутки вы сможете найти их смещение по сравнению с документом - см. jQuery offset, а затем на основе значения прокрутки, если смещение меньше прокрутки и высота смещения + больше смещения прокрутки, тогда элемент должен «касаться» верхнего края.

источник

2011-12-27 19:53:20 Tejs

Эффективный способ выбора элементов, затрагивающих верхний край окна просмотра

ответ

Смежные вопросы