Как отображать айди в адресной строке при скролинге?

Question

[Роман]

Есть сайт пример cp-templates.ru . Когда мы начинаем скролить, то в адресной строке меняется айди который присвоен разным секциям. Как такое реализовать, помогите

Answer 1

[Ruslan]

Вот код, который отвечает за это. Смотрите, разбирайтесь, тут ничего сложного нет.

var deftitle = document.title;
var defurl = document.location.toString().split('#', 2)[0];
var stPoint = 0, anchors = [], anchTop = [];
$(function(){
	anchors[0]="ac_1309";anchors[1]="ac_769";anchors[2]="ac_876";anchors[3]="ac_894";anchors[4]="ac_903";anchors[5]="ac_912";anchors[6]="ac_1158";anchors[7]="ac_1153";anchors[8]="ac_2249";anchors[9]="ac_1128";anchors[10]="ac_767";anchors[11]="ac_2047";anchors[12]="ac_1453";
	for(var i = 0; i < 13; i++) {
		anchTop[i] = $('#'+anchors[i]).offset().top;
	}
	var lastrel = '';
	$('a[href^="#/"]').bind("click", function(e){popupScroll($(this).attr('href'),true);e.preventDefault();});
	if (window.location.hash && window.location.hash.substr(0, 2) == "#/") popupScroll(window.location.hash,false);
	$(document).on('keyup', function(e){
		if (e.which == 27) $.each($('.popupContent'), function(i, val) {popupClose(val.id.substr(2));});
	});

	$(window).scroll(function(){
		stPoint = $(window).scrollTop();
		var rel = '';
		for (i = 0; i < 13; i++) {
			if ((anchTop[i] - 1) <= stPoint && !$('#'+anchors[i]).parent().parent().hasClass('phidden')) {
				rel = anchors[i];
				if (anchTop[i+1] != undefined && (anchTop[i+1] - 1) > stPoint || $('#'+anchors[i]).parent().parent().hasClass('popupContent')) break;
			}
		}
		if (lastrel != rel) {
			if (lastrel) {
				if (rel == 'ac_1309' || rel == '') {
					if (deftitle != document.title) document.title = deftitle;
					if (history && history.replaceState) history.replaceState(null, null, defurl);
				} else {
					document.title = $('#'+rel).attr('title')+' '+deftitle;
					if (history && history.replaceState) history.replaceState(null, null, '#'+$('#'+rel+' span').attr('id'));
				}
			}
			lastrel = rel;
			$('.anchors').removeClass('msel');
			if (rel) $('.'+rel).addClass('msel');
		}
	});
	$(window).trigger('scroll');
});

Answer 2

[sunrails]

window.location.hash

Comments

[Роман]

как это в коде записать, в js не сильно разбираюсь?

Answer 3

[Александр Вульф]

Это можно сделать при помощи location.hash. Если вы не сильно разбираетесь в JS, то вам на фриланс надо. Там сделают.

Comments

[Роман]

не настолько, что б обращаться на фриланс, я сам версиальщик, с этим впервые столкнулся

[Александр Вульф]

Роман: ну тогда почитайте доки. Юзаете onscroll и location.hash, доки по ним легко гуглятся. А решать за вас задачи тут никто не будет :)

[Роман]

Александр Вульф: локейшин у меня отрабатывает только при клике по меню. Тоесть номер секции вписывается в урл. Как сделать что б он отрабатывал при скроле?

[Роман]

.@mannaro: я кидал скролл на боди,то скрипт не отрабатывал. На какой элемент кидать скрол?

[sunrails]

Разжевали, ссылок на доки накидали - не нравится. Напишите за меня и все тут :)

[zooks]

Роман: в исходном коде примера подсмотрите

[Роман]

sunrails: если тебе тебе разжевали то бери и молча жуй, лишь бы что то написать

[sunrails]

Роман: жаль, что в школах сейчас не учат хорошим манерам.

[Роман]

sunrails: зачем ты вообще здесь что то пишешь? Твое сообщение подразумевает "посмотрите какой он, всем понятно одному ему непонятно", я и так это написал. Повторюсь ещё раз. Зачем ты вообще здесь что то пишешь не по теме?

[Роман]

sunrails: Зачем ты вообще здесь что то пишешь не по теме?

[Роман]

sunrails: если тебе не нравится то что я пишу в вопросе который я создал, не отвечай ради Бога, пройди себе мимо, нет же, тебе нужно взять и написать, "поучить жизни".

Answer 4

[Дмитрий Беляев]

Конкретно в данном примере сделано через location.hash
Но я бы посоветовал Вам так же посмотреть в сторону history.replaceState

Comments

[Роман]

как это в коде записать, в js не сильно разбираюсь?