Single Page с Хэш навигацией
Здравствуйте всем.
Посмотрите, пожалуйста, пример одностраничного сайта При скроле страницы происходит выделение активного меню, отвечающего за просматриваемую область. При клике на меню присваивается хэш. Мне нужно, чтобы хэш также присваивался и при скроле. Объясните принцип задания хэша при скроллинге и небольшой пример кода как это можно реализовать на практике. Спасибо. |
Цитата:
.$window.on("scroll.... проверяем позицию, присваиваем хеш Цитата:
|
1n3gan,
попробуйте заменить ваш плагин <script src="jquery.singlePageNav.min.js"></script> на код ниже <script>"function"!==typeof Object.create&&(Object.create=function(c){function f(){}f.prototype=c;return new f}); (function(c,f,h,k){var g={init:function(a,b){this.options=c.extend({},c.fn.singlePageNav.defaults,a);this.container=b;this.$container=c(b);this.$links=this.$container.find("a");""!==this.options.filter&&(this.$links=this.$links.filter(this.options.filter));this.$window=c(f);this.$htmlbody=c("html, body");this.$links.on("click.singlePageNav",c.proxy(this.handleClick,this));this.didScroll=!1;this.checkPosition();this.setTimer()},handleClick:function(a){var b=this,d=a.currentTarget,e=c(d.hash);a.preventDefault(); e.length&&(b.clearTimer(),"function"===typeof b.options.beforeStart&&b.options.beforeStart(),b.setActiveLink(d.hash),b.scrollTo(e,function(){b.options.updateHash&&history.pushState&&history.pushState(null,null,d.hash);b.setTimer();if("function"===typeof b.options.onComplete)b.options.onComplete()}))},scrollTo:function(a,b){var c=this.getCoords(a).top,e=!1;this.$htmlbody.stop().animate({scrollTop:c},{duration:this.options.speed,easing:this.options.easing,complete:function(){"function"!==typeof b|| e||b();e=!0}})},setTimer:function(){var a=this;a.$window.on("scroll.singlePageNav",function(){a.didScroll=!0});a.timer=setInterval(function(){a.didScroll&&(a.didScroll=!1,a.checkPosition())},250)},clearTimer:function(){clearInterval(this.timer);this.$window.off("scroll.singlePageNav");this.didScroll=!1},checkPosition:function(){var a=this.$window.scrollTop(),a=this.getCurrentSection(a);this.setActiveLink(a)},getCoords:function(a){return{top:Math.round(a.offset().top)-this.options.offset}},setActiveLink:function(a){a= this.$container.find("a[href='"+a+"']");a.hasClass(this.options.currentClass)||(this.$links.removeClass(this.options.currentClass),a.addClass(this.options.currentClass),a.trigger("click"))},getCurrentSection:function(a){var b,d,e,f;for(b=0;b<this.$links.length;b++)d=this.$links[b].hash,c(d).length&&(e=this.getCoords(c(d)),a>=e.top-this.options.threshold&&(f=d));return f||this.$links[0].hash}};c.fn.singlePageNav=function(a){return this.each(function(){Object.create(g).init(a,this)})};c.fn.singlePageNav.defaults= {offset:0,threshold:120,speed:400,currentClass:"current",easing:"swing",updateHash:!1,filter:"",onComplete:!1,beforeStart:!1}})(jQuery,window,document);</script> напишите получился ли тот эффект который вы хотели. |
Часовой пояс GMT +3, время: 10:52. |