Подсветка активного пункта меню

Рейтинг: 0Ответов: 1Опубликовано: 14.02.2015

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

css javascript html jquery меню
Источник: Stack Overflow на русском

Ответы

▲ 2

  1. Создаёте массив с "высотами" Ваших экранов:

    $('.scene').offset().top;

  2. Вешаете событие на $(window):

    $(window).scroll(function(e){ /* */ });

  3. Внутри этого события "мониторите" параметр scrollTop:

    var $window = $(window);
$window.scroll(function(){
    var cursor = $window.scrollTop();
    console.log(cursor);
});

Это и будет высота текущего скролла. Сравниваете её с вашим "массивом высот" и подсвечиваете пункт активным.

Несколько советов:

  1. Чем меньше кода в "колбеке" события, тем быстрее будет работать страница.

  2. Хорошей практикой считается вешать не только на событие scroll, но и resize иногда и на другие.

  3. При нахождении нужной высоты для активного пункта выходить из цикла, для более быстрого срабатывания события.

  4. Не использовать данную реализацию на мобильных устройствах (много проблем, тут описывать не хватит страницы).

  5. Есть некие проблемы со всеми браузерами Internet Explorer: они сначала скроллят, а потом попадают в колбек. Все остальные браузеры сперва отрабатывают колбек, а потом скроллят (с возможностью preventDefault/return false.