Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.03.2014, 10:58
Аватар для 1n3gan
Интересующийся
Отправить личное сообщение для 1n3gan Посмотреть профиль Найти все сообщения от 1n3gan
 
Регистрация: 10.04.2013
Сообщений: 27

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

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

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

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

Спасибо.

Последний раз редактировалось 1n3gan, 12.03.2014 в 11:10.
Ответить с цитированием
  #2 (permalink)  
Старый 12.03.2014, 11:30
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

Сообщение от 1n3gan
принцип задания хэша при скроллинге
.$window.on("scroll....

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

Сообщение от 1n3gan
пример кода как это можно реализовать
вы же сами рабочий пример предоставили
Ответить с цитированием
  #3 (permalink)  
Старый 12.03.2014, 12:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>

напишите получился ли тот эффект который вы хотели.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
"Листание" текста в форме путем нажатия кнопки dikabraz Общие вопросы Javascript 20 25.08.2015 13:27
хэш в php-переменную - возможно ли без ajax? Freakmeister AJAX и COMET 23 24.06.2012 18:52
не работает форма в окне, вызванном jquery page slide ikar jQuery 0 31.07.2011 22:55