Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Single Page с Хэш навигацией (https://javascript.ru/forum/jquery/45687-single-page-s-khehsh-navigaciejj.html)

1n3gan 12.03.2014 10:58

Single Page с Хэш навигацией
 
Здравствуйте всем.

Посмотрите, пожалуйста, пример одностраничного сайта

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

Объясните принцип задания хэша при скроллинге и небольшой пример кода как это можно реализовать на практике.

Спасибо.

animhotep 12.03.2014 11:30

Цитата:

Сообщение от 1n3gan
принцип задания хэша при скроллинге

.$window.on("scroll....

проверяем позицию, присваиваем хеш

Цитата:

Сообщение от 1n3gan
пример кода как это можно реализовать

вы же сами рабочий пример предоставили

рони 12.03.2014 12:36

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.