Смена активного пункта меню при прокрутке страницы?

Хорошим примером этой функции будет посмотреть здесь: http://www.maddim.com/demos/spark-r6/

Как вы прокрутите страницу вниз, активного пункта меню изменения.

Как это сделать?

Это делается путем привязки к свиток событие контейнера (обычно окно).

Быстрый пример:

// Cache selectors var topMenu = $("#top-menu"),     topMenuHeight = topMenu.outerHeight()+15,     // All list items     menuItems = topMenu.find("a"),     // Anchors corresponding to menu items     scrollItems = menuItems.map(function(){       var item = $($(this).attr("href"));       if (item.length) { return item; }     });  // Bind to scroll $(window).scroll(function(){    // Get container scroll position    var fromTop = $(this).scrollTop()+topMenuHeight;     // Get id of current scroll item    var cur = scrollItems.map(function(){      if ($(this).offset().top < fromTop)        return this;    });    // Get the id of the current element    cur = cur[cur.length-1];    var id = cur && cur.length ? cur[0].id : "";    // Set/remove active class    menuItems      .parent().removeClass("active")      .end().filter("[href=#"+id+"]").parent().addClass("active"); });​ 

См. выше в действии на jsFiddle , в том числе прокрутки анимации.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*