İçerikler
bBu 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ığını inceleyelim.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
</head>
<body>
<div class="ust">
<div class="yukle"></div>
</div>
<div class="main">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, magnam ea ipsam, nulla quibusdam reiciendis repellendus maxime earum laudantium nobis, asperiores possimus. Facere odit soluta deleniti ratione voluptates laudantium aspernatur?
Suscipit, ratione quae molestiae sequi nesciunt assumenda rerum dicta mollitia reiciendis excepturi quaerat officia, voluptatibus itaque non iste perferendis corrupti! Quod est totam nam labore impedit, voluptas enim velit commodi!
Beatae eius qui placeat totam sapiente enim animi, omnis quisquam dolorem voluptatem fugiat odit at consequatur deserunt. Accusamus autem cupiditate exercitationem necessitatibus dicta asperiores sequi, iure nemo labore dolore repellat.
Quae amet ad, quod sequi quo iure iusto ex maxime facilis nihil optio perspiciatis et corrupti distinctio ratione repudiandae minus non veniam, dolorem a modi aperiam. Iste maxime pariatur recusandae.
Eligendi, autem molestiae? Eaque, error natus, esse tempora vero, corporis a omnis eius incidunt nihil sed est odit delectus cum voluptates voluptas amet iure veritatis. Excepturi mollitia quas quia sint.
Labore perferendis facere expedita ullam accusamus harum alias laborum corrupti veritatis architecto, neque quasi eveniet laboriosam, quos inventore cupiditate cum minus consequatur praesentium. Aliquam, iusto obcaecati accusamus ipsum nulla quasi.
Eos voluptate repudiandae enim. Similique nesciunt voluptatum doloremque voluptates esse blanditiis? Porro id inventore eaque, odio ipsum neque modi vitae a cumque aspernatur dignissimos voluptas, ullam illo itaque voluptatibus impedit?
atione laborum vero dolore maiores, porro sunt blanditiis natus cupiditate, voluptatem enim sequi magni dolorem inventore quos, doloribus veniam facere odit voluptatibus? Impedit.
Expedita distinctio nulla laboriosam, unde corrupti illo error quisquam at, fuga architecto eius eum sapiente consequatur. Iure voluptatum facere eius assumenda saepe, sapiente quisquam. Reprehenderit rem autem rerum voluptatibus porro!
Reprehenderit eos provident, exercitationem asperiores consequatur, minima debitis accusamus ex excepturi deserunt recusandae esse impedit numquam voluptates unde? Amet adipisci rem animi magni optio corrupti voluptas reiciendis aliquid unde mollitia.
Iure odit voluptatibus, modi iusto commodi quasi! Rem accusamus alias similique magnam, error doloremque veniam eius obcaecati ipsam vero velit corporis, quis earum nulla ullam maxime culpa, voluptatum porro veritatis.
Sit, quam temporibus! Quod tempore voluptatibus delectus harum suscipit provident nihil odit veritatis laudantium veniam? Sed impedit maxime tempora ipsa aut reiciendis aperiam. Fugit magni perspiciatis animi cum nesciunt repudiandae?
Deserunt in explicabo veritatis quas commodi modi, possimus ullam repellendus doloremque ducimus, dolores sit, rerum sequi impedit fugit eius laborum exercitationem voluptatem architecto. Asperiores adipisci nulla voluptatum obcaecati consectetur quia?
Accusamus officia deleniti earum eos aut. Laboriosam veritatis mollitia, adipisci perspiciatis libero voluptatum nam quisquam saepe facere eveniet? Ipsum, ipsa velit! Amet temporibus fugiat dolorum rerum harum vitae placeat sapiente.
Rem itaque ratione saepe vero corporis aut voluptates laudantium voluptatibus, illo unde eum laboriosam eius esse, recusandae sunt quis officiis laborum facere excepturi nostrum vel. Atque quidem adipisci quibusdam eos!
Id eveniet quia minima distinctio soluta odit dolorum accusamus impedit ea officiis animi et perferendis deserunt, nihil quasi ab provident sequi hic mollitia? Saepe dignissimos natus minus vel fugit quam.
</div>
</div>
</body>
</html>
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.
.ust{position: fixed;top: 0;left: 0;z-index: 1;width: 100%;}
.yukle {height: 2px;margin-bottom: -2px;background: red;width: 0%;}
.main .content {margin: 0 auto;width: 500px;text-align:justify;font-size: 20px}
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.
$(window).scroll(function(){
// Scroll verisi
const scrollDurumu = $(window).scrollTop();
// Dökümanımızın yüksekliği
const icerikYukseklik = $(document).height();
// Penceremizin yüksekliği
const pencereYukseklik = $(window).height();
// Hesaplama işlemi
const yuzdeHesapla = scrollDurumu / (icerikYukseklik - pencereYukseklik) * 100;
// Hesaplanan sonucun .progressBar adlı divimize yansıması
$('.yukle').css('width', yuzdeHesapla + '%');
});
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 : https://yadi.sk/d/C6j2qRz4YTJUdQ
