jQuery ile Scrollbar Pozisyonunu Bulma Versiyon 2.10

soulmy jQuery 27.Ara.2013 354 görüntülenme 0 yorum

Bu aralar jQuery öğrenmeye çalışıyorum. Her yeni birşey öğrendiğimde kendi kendime "Neden daha önceden jQuery öğrenmedimki?" diyorum.

Geçenlerde bir sitede gezinirken, scrollbar'da hangi pozisyonda bulunduğumuzu gösteren bir kod buldum. Ben de hem ziyaretçilerim faydalansın hem de kendim ileride ihtiyacım olur diye paylaşıyorum.

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Get Scrollbar Percentage</title>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

		<script>

			$(document).ready(function() {

				$(window).scroll(function(e){
					var scrollTop = $(window).scrollTop();
					var docHeight = $(document).height();
					var winHeight = $(window).height();
					var scrollPercent = (scrollTop) / (docHeight - winHeight);
					var scrollPercentRounded = Math.round(scrollPercent*100)/100;

				    $('#scrollPercentLabel>span').html(scrollPercentRounded);
				    repositionLabel();
				});

				$(window).resize(function(){
					repositionLabel();
				});

				function repositionLabel() {
					$('#scrollPercentLabel').css({
						position:'fixed',
						left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
						top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
					});
				}

				repositionLabel();

			});

		</script>

		<style>

			body {
				background-image: url('http://subtlepatterns.com/patterns/crissXcross.png');
				margin: 0px;
				padding: 0px;
			}

			#fakeHeight {
				height: 6000px;
				width: 1px;
			}

			#scrollPercentLabel {
				font-family: Impact;
				font-size: 50px;
				color: #2B2B2B;
				background: rgba(255, 255, 255, 0.5);
				padding: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
				border-radius: 15px;
			}

		</style>

	</head>

	<body>
		<p id="fakeHeight"></p>
		<p id="scrollPercentLabel">scrollPercent: <span>0</span></p>
	</body>

</html>

Kaynak: https://snipplr.com/view/69164/html5-scrollbar-percentage-position-using-javascript/

Yorumlar

Bu yazıya yorum yapan ilk kişi sen ol.