Понадобилось сделать эффект, чтобы при прокрутке колесом мыши страничка прокручивалась до следующей секции в навигации или до предыдущей, в зависимости от направления прокрутки. Следилкой пунктов меню воспользовалась из bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function addEvent(elem, type, handler){ if(elem.addEventListener){ elem.addEventListener(type, handler, false); } else { elem.attachEvent('on'+type, handler); } return false; } function scrollDirection(){ var weelEvt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel', el = document.body; addEvent(el, weelEvt, function(e){ var evt = e.originalEvent ? e.originalEvent : e, delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; e.preventDefault(); var anchor = $('li.active a'); if (delta < 0) { // вниз anchor = anchor.parent().next().find('a'); } else if (delta > 0) { // вверх anchor = anchor.parent().prev().find('a'); } if ($(anchor.attr('href')).offset() != undefined) { anchor.click(); } }); } // Для jQuery - просто вызываем функцию после загрузки DOM $(function(){ scrollDirection(); }); |
Здесь при прокрутке определяется направление прокрутки, и в зависимости от этого берется следующий или предыдущий пункт меню, для которого дальше вызывается событие клика.
|
1 2 3 4 5 6 7 8 9 10 11 |
$('a.navigation[href*=#]').bind("click", function(e){ e.preventDefault(); var anchor = $(this); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 1000); }); |
Структура меню самая обычная:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li class="active"><a href="#section1" class="navigation">Главная</a></li> <li><a href="#section2" class="navigation">Аренда</a></li> <li><a href="#section3" class="navigation">Фото</a></li> <li><a href="#section4" class="navigation">Преимущества</a></li> <li><a href="#section5" class="navigation">Команда</a></li> <li><a href="#section6" class="navigation">Контакты</a></li> </ul> |
Надеюсь это еще пригодится.