Как сделать индикатор прокрутки страницы?

Question

[mrJLi]

Подскажите пожалуйста, как реализовать, или может есть уже готовые плагины, на их примере посмотреть. Нужно, что-бы, при прокрутке странице по вертикали(стандартной полосой прокрутки, или колесиком мыши) в фиксированном div отображался индикатор в виде небольшой полосы прокрутки, с бегунком который бы перемещался по мере скроллирования страницы или вверх или вниз.

Answer 1

[Валерий Кириченко]

А что мешает делать ширину ползунка равной отношению текущей прокрутки на всю длину страницы?

$(window).scroll(function(){
    var ratio = $(document).scrollTop()/(($(document).height() - $(window).height()) / 100);
    $("#progress").width(ratio+"%");
});

Демо

Comments

[mrJLi]

то что надо спасибо за помощь.

Answer 2

[Andrey Bazykin]

Недавно реализовывал что-то подобное тут. Справа по мере прокрутки страницы прокручивается валик с краской. То что нужно? Вот исходный код скрипта:

$(document).ready(function(e) {
	var os = (function() {
		var ua = navigator.userAgent.toLowerCase();
		//console.log(ua);
		return {
			isWin: /windows/.test(ua),
			isWin2K: /windows nt 5.0/.test(ua),
			isXP: /windows nt 5.1/.test(ua),
			isVista: /windows nt 6.0/.test(ua),
			isWin7: /windows nt 6.1/.test(ua),
			isWin8: /windows nt 6.2/.test(ua),
			isMac: /macintosh/.test(ua)
		};
	}());
	var animateSpeed = 500;
	if(os.isMac) {
		animateSpeed = 600;
	}
	
	/*Валик*/
	var rollHPos = 0,
	scrollTopPosition = $(document).scrollTop(),
	docHeight = $(document).height(),
	winHeight = $(window).height(),
	rollWinStep = Math.floor(winHeight / (Math.floor(docHeight / winHeight)));
	//console.log(docHeight);
	//Движение за мышкой
	/*$(this).mousemove(function(e){
		if( e.pageY > 0 && e.pageY < docHeight ) goRoll(e.pageY, true);		
	});*/
	//Движение по скролу
	$(document).scroll(function(){
		goRoll($(document).scrollTop(), false);		
	});
	
	$("#roll").click(function(){
		goRoll(0, false);
		$("html, body").animate({ scrollTop: 0 }, 500);
		
	});
	$(document).mousemove(function(e){
		//console.log($(this).height() + " : " + e.pageY);		
	});
	function goRoll( STP, mousemove ){
		docHeight = $(document).height();
		winHeight = $(window).height();
		if( mousemove ) animateSpeed = 0;
		//console.log(docHeight)
		//Крутим валик вниз
		if( scrollTopPosition > $(document).scrollTop() ){
			if( rollHPos == 0 ) rollHPos = -946;
			else rollHPos += 86;
		}
		//Крутим валик вверх
		else{
			if( rollHPos == -946 ) rollHPos =  0;
			else rollHPos -= 86;
		}
		//Запоминаем позицию скролла относительно верха страницы
		scrollTopPosition = STP;
		rollCorrectPos = STP == (docHeight - winHeight) ? 90 : 0;
		//Визуализируем
		$("#roll").css({"background-position-y": (rollHPos).toString() + "px"});
		perOfDocScroll = Math.floor(scrollTopPosition/((docHeight - winHeight) / 100));
		//setTimeout(function(){
		if( !mousemove ){
			//console.log(docHeight);
			$("#roll").stop().animate({"margin-top": + Math.floor(((winHeight) / 100 * perOfDocScroll)) - 1 + "px", "top" : (scrollTopPosition - rollCorrectPos) + "px"}, animateSpeed);
			$("#paint-line").stop().animate({height: + Math.floor(((winHeight) / 100 * perOfDocScroll)) + (scrollTopPosition - rollCorrectPos) + "px"}, animateSpeed);
		}
		else{
			$("#roll").stop().animate({"top" : (scrollTopPosition - rollCorrectPos - 90) + "px"}, animateSpeed);
			$("#paint-line").stop().animate({height: (scrollTopPosition - rollCorrectPos - 90 + 1) + "px"}, animateSpeed);
		}
			
		
		//}, 100);

	}
	/*Валик*/
	
});