liLanding - jQuery Landing Navigation или навигация по лендингу на jQuery
liLanding - jQuery Landing Navigation или навигация по лендингу на jQuery
Live prev: http://jsfiddle.net/zW94b/2/
Code: |
<script> /* * jQuery liLanding v 1.0 * * Copyright 2013, Linnik Yura | LI MASS CODE | http://masscode.ru * Free to use * * 03.12.2013 */ (function ($) { var methods = { init: function (options) { var p = { show: function (linkEl, landingItem) {}, hide: function (linkEl, landingItem) {} }; if (options) { $.extend(p, options); } return this.each(function () { var el = $(this); var elPos = el.offset().top; var wHalf = $(window).height()/2 var scrollId = function(){}; //assign events only links with anchors $('a[href^=#]',el).on('click',function(){ var linkItem = $(this); if(!linkItem.is('.cur')){ var linkHref = linkItem.attr('href'); var linkTarget = $(linkHref); var linkTargetPos = linkTarget.offset().top; var windowPos = $(window).scrollTop(); var animDuration = linkTargetPos - windowPos if(animDuration < 0){ animDuration = animDuration*-1 } if(animDuration > 2000) { animDuration = 2000 } //scroll the page to the desired block if(linkTarget.length){ $('html, body').stop(true).animate({scrollTop:linkTargetPos},animDuration,function(){ $(window).trigger('scroll'); }); } } return false; }) //stop the animation by scrolling var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x if (document.attachEvent) //if IE (and Opera depending on user setting) document.attachEvent("on"+mousewheelevt, function(e){ $('html, body').stop(true); }); else if (document.addEventListener) //WC3 browsers document.addEventListener(mousewheelevt, function(e){ //e.detail //direction $('html, body').stop(true); }, false) //highlight the desired link in the menu by scrolling $(window).on('scroll',function(e){ clearTimeout(scrollId); var windowPos = $(window).scrollTop(); if(windowPos > elPos){ el.addClass('landingFix'); }else{ el.removeClass('landingFix'); } scrollId = setTimeout(function(){ $('.landingItem').each(function(){ var landingItem = $(this); var landingItemHeight = landingItem.height(); var landingItemTop = landingItem.offset().top - wHalf; var linkHref = landingItem.attr('id'); var linkEl = $('a[href="#'+linkHref+'"]',el); var status; if(windowPos > landingItemTop && windowPos < (landingItemTop + landingItemHeight)){ if(!linkEl.is('.cur')){ linkEl.addClass('cur'); if (p.show !== undefined) { p.show(linkEl, landingItem); } } }else{ if(linkEl.is('.cur')){ linkEl.removeClass('cur'); if (p.hide !== undefined) { p.hide(linkEl, landingItem); } } } }); },100); }) $(window).trigger('scroll'); }); } }; $.fn.liLanding = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Метод ' + method + ' в jQuery.liLanding не существует'); } }; })(jQuery); //Инициализация плагина $(window).load(function(){ $('.landingMenu').liLanding(); }) </script> <div class="landingMenu"> <ul> <li><a href="#land_1">landing link 1</a></li> <li><a href="#land_2">landing link 2</a></li> <li><a href="#land_3">landing link 3</a></li> <li><a href="#land_4">landing link 4</a></li> <li><a href="#land_5">landing link 5</a></li> </ul> </div> <div id="land_1" class="landingItem"> 1 </div> <div id="land_2" class="landingItem"> 2 </div> <div id="land_3" class="landingItem"> 3 </div> <div id="land_4" class="landingItem"> 4 </div> <div id="land_5" class="landingItem"> 5 </div> |