JQuery Alanı Jquery ile Kaydırma Çubuğunun Durumuna Göre Progressbar Yapımı

Son zamanlarda görmeye başladığımız, aşağıya indikçe büyüyen yani sayfanın sonuna az kaldığını gösteren çubuklar yeni tasarımların özendiği şeylerden olmuştur.

Blogumda da mevcut olan bu progressbar ile hem gelişmiş bir görünüm hemde kullanıcılara kolaylık sunabiliyoruz.

Nasıl yapılır?

İlk önce HTML Kodları:

<div id="progress"></div>

CSS Kodları:

#progress {
  height: 4px;
  background-color:#ffeb3b;
  position: fixed;
  top: 0;
  left: 0;
}

Jquery Kodlarımız:

$(document).ready(function() {
$(window).on('load scroll', function() {
 
var docHeight = $(document).height();
var windowPos = $(window).scrollTop();
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var completion = windowPos / (docHeight - windowHeight);
 
if (docHeight <= windowHeight) {
$('#progress').width(windowWidth);
} else {
$('#progress').width(completion * windowWidth);
}
});
});

Bu JQuery koduyla ne kadar aşağıda olduğumuzu ölçtük ve ölçülen değeri genişlik olarak #progress bileşenimize verdik.

Önerilen Yazı

JQuery ile Aşağıya İnince Menüyü Sabitleme