Нужно сделать так, чтоб при скроллинге по лендингу автоматически подсвечивался тот или иной пункт меню, показывающий, где мы находимся.
-
а вы продумайте алгоритм. это же просто– mountpoint14 фев 2015 в 15:32
-
Нужно. Однозначно. =)– Crus14 фев 2015 в 15:33
-
@skies, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).– Виталина15 фев 2015 в 12:02
1 ответ
Создаёте массив с "высотами" Ваших экранов:
$('.scene').offset().top;
Вешаете событие на $(window):
$(window).scroll(function(e){ /* */ });
Внутри этого события "мониторите" параметр scrollTop:
var $window = $(window); $window.scroll(function(){ var cursor = $window.scrollTop(); console.log(cursor); });
Это и будет высота текущего скролла. Сравниваете её с вашим "массивом высот" и подсвечиваете пункт активным.
Несколько советов:
Чем меньше кода в "колбеке" события, тем быстрее будет работать страница.
Хорошей практикой считается вешать не только на событие
scroll
, но иresize
иногда и на другие.При нахождении нужной высоты для активного пункта выходить из цикла, для более быстрого срабатывания события.
Не использовать данную реализацию на мобильных устройствах (много проблем, тут описывать не хватит страницы).
Есть некие проблемы со всеми браузерами Internet Explorer: они сначала скроллят, а потом попадают в колбек. Все остальные браузеры сперва отрабатывают колбек, а потом скроллят (с возможностью
preventDefault/return false
.