jQuery Dersleri

jQuery İle Scroll İndikçe İlerleme Çubuğu Hazırlama

jquery dersleri

Bu makalede jQuery ile scroll’u indirdikçe sayfanın en üstünde ilerleyen bir çubuk yapacağız. Bu uygulama sayfada yer alan makalenin bitimine ne kadar kaldığını gösterecektir. Bu örneği sadece ilerleme çubuğu olarak bırakmayıp daha da geliştirebilirsiniz. Örneğin, scroll ilerledikçe belirli bir yerde (%50 gibi) sağ altta bir kutucuk gösterebilirsiniz. Yada %100 tamamlandıktan sonra bir sonraki gönderiyi direkt sayfanın altına yazdırabilirsiniz.

Geliştirme aşamasına geçmeden önce jQuery ile scroll’u indirdikçe gerçekleşen progress bar’ın nasıl yapıldığına deyinelim.

Sayfa İskeletini Oluşturma

Öncelikle bir HTML yapısı oluşturuyoruz. Script alanına jQuery kütüphanesini ekliyoruz. Ayrıca CSS alanını ve yazacağımız jQuery kodlarının bölümünü yine iskelette oluşturuyoruz.

Css Kodlarını Hazırlama

Gerekli iskeleti oluşturduktan sonra aşağıda yer alan kodları CSS bölümüne yazınız. Burada hazırlayacağımız kodda bir takım görsellikler veriyoruz.

Yukarıdaki kodları iskelette yer alan script alanına yazmanız yeterli olacaktır.

jQuery Kodlarını Hazırlama

Son olarak jQuey ile ilerleme çubuğunun ayarlanmasına. Buradaki mantık şudur; içeriğin yükseklik değerinden, pencerenin yükseklik değeri çıkartılır. Sonrasında elde edilen değer 100 ile çarpılarak scroll’un şuandaki durumuna bölünür. Böylelikle sayfa içinde ne kadar aşağıya inildiği yüzde olarak bulunur.

Yukarıda yer alan CSS ve JQUERY kodlarını iskelette birleştirdiğinizde, sayfayı aşağıya indirdikçe tepede ilerledikçe dolan bir bar göreceksiniz. Bu bar, sayfanın yükseklik ve scroll değeri hesaplanarak bulunmaktadır.

DOSYALARI İNDİR - YANDEX

Bir önceki yazım olan jQuery ile Formdaki Şifreyi Görüntüleme başlıklı makalemi de okumanızı öneririm.

İlgilizi Çekecek Konular

jQuery ile Sadece Bir Sefer İşlem Yaptırma (One Metodu)

ibrahim Çevrük

jQuery ile Css Metodunun Kullanımı

ibrahim Çevrük

jQuery ile Renkli Listeleme Yapımı (odd ve even)

ibrahim Çevrük

1 Yorum

Avatar
Yusuf Aytanözü 8 Nisan 2019 at 19:10

Ellerine sağlık hocam. Güzel konulara değindiğini farkettim.
Haber sitelerinde altlara doğru ilerledikten sonra geri tuşuna basınca önceki başlığa geçiyor. Bunu nasıl yapabilirim?

Cevap

Yorum Giriniz