jQuery ile Kaydırma Çubuğu Seviyesi Barı

Vatanay Özbeyli jQuery

scroll-progressÖzellikle uzun yazıları barındıran blog sitelerinde kullanıcıya makalenin hangi aşamasında olduğunu göstermek faydalı olabilir. Böylece web sayfanızın kullanıcı etkileşimini de güçlendirebilirsiniz.

Bu makalemizde Brett Smith tarafından hazırlanmış, ekran aşağı scroll edildikçe dolan ve uzun yazıların okunma seviyesini gösteren bir bar oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

Uzun Makalelerinize Okunma Seviyesi Gösterici

jQuery ile tarayıcının scroll mesafesini ölçüp varolan derece ile kıyaslayarak ister piksel istersek de yüzde bazlı bir rakam gösterebiliriz. İşte bu rakam sayesinde de örnekte görüntülediğiniz tasarımın altyapısını oluşturmak mümkün. Geriye sadece birkaç satır CSS ve HTML koduyla tasarımı oluşturmak kalıyor. Hazırsanız başlayalım.

HTML Kodları

HTML tarafında işimiz kısa. Uzun bir metnin olduğu sayfanın içerisine aşağıdaki division elemanını eklemeniz yeterli.

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

CSS Kodları

Yukarıda oluşturduğumuz division elemanını ekranın üstüne tanımlayalım. Ayrıca da bir renk belirleyelim.

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

jQuery Kodları

Son olarak kaydırma çubuğunu hesaplayalım.

$(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 &lt;= windowHeight) {
$('#progress').width(windowWidth);
} else {
$('#progress').width(completion * windowWidth);
}
});
});

Bu kadar.