Bootstrap Scrollspy, uzun sayfalarda kullanıcıların hangi bölümde bulunduklarını göstermek için kullanılan bir bileşendir. Bu özellik, sayfa kaydırıldıkça belirli bölümlerin başlıklarını vurgular ve kullanıcıya hangi bölümde olduğunu anlaması için görsel bir geri bildirim sağlar. Genellikle, tek sayfalık uygulamalarda veya uzun içerikli sayfalarda kullanılır.
Bootstrap Scrollspy Özellikleri
- Otomatik Vurgulama: Kullanıcı sayfayı kaydırdıkça, belirli bölüm başlıkları otomatik olarak vurgulanır.
- Duyarlı Tasarım: Mobil ve masaüstü cihazlarda uyumlu bir görünüm sunar.
- Navigasyon Kolaylığı: Kullanıcılara sayfa içinde gezinme kolaylığı sağlar.
- Etkileşimli Kullanım: Kullanıcı, vurgulanan bölümlere tıklayarak o bölüme gidebilir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir Scrollspy örneği verilmiştir. Bu örnekte, sayfa kaydırıldıkça belirli bölümlerin başlıkları vurgulanmaktadır.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Scrollspy Örneği</title>
<style>
body {
position: relative; /* Scrollspy için gerekli */
}
section {
height: 600px; /* Bölümler için yükseklik ayarı */
padding: 20px;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="70" tabindex="0">
<nav id="navbar-example" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Scrollspy Örneği</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#section1">Bölüm 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Bölüm 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Bölüm 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Bölüm 4</a>
</li>
</ul>
</nav>
<div class="container mt-3">
<section id="section1" class="bg-light">
<h2>Bölüm 1</h2>
<p>Bu bölümün içeriği burada yer alır.</p>
</section>
<section id="section2" class="bg-secondary text-white">
<h2>Bölüm 2</h2>
<p>Bu bölümün içeriği burada yer alır.</p>
</section>
<section id="section3" class="bg-light">
<h2>Bölüm 3</h2>
<p>Bu bölümün içeriği burada yer alır.</p>
</section>
<section id="section4" class="bg-secondary text-white">
<h2>Bölüm 4</h2>
<p>Bu bölümün içeriği burada yer alır.</p>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Açıklama
-
Scrollspy Yapısı:
-
<body data-bs-spy="scroll" data-bs-target="#navbar-example">: Sayfanın kaydırılma olaylarını takip etmek için gerekli ayarlar.data-bs-target, hangi navigasyon çubuğunun takip edileceğini belirtir. -
<nav>: Scrollspy için kullanılacak navigasyon çubuğu. Bu çubuk, kullanıcı sayfayı kaydırdıkça hangi bölümün aktif olduğunu gösterecektir. -
<section>: Her bölüm, Scrollspy'ın hangi bölümlerin vurgulanacağını belirlemesi içinidile tanımlanmıştır.
-
-
CSS Stilleri:
-
section { height: 600px; }: Her bölümün yüksekliği ayarlanmıştır. Bu, sayfada kaydırma yapılmasını sağlar. -
padding: Bölümler için içerik boşluğu ekler.
-
Önemli Notlar
- Scrollspy, kullanıcıların hangi bölümde bulunduklarını anlamalarına yardımcı olur, bu da uzun sayfalarda gezinmeyi kolaylaştırır.
-
Offset Ayarı:
data-bs-offsetözelliği, başlıkların ne kadar yukarıda görünmesi gerektiğini belirler. Bu değer, sayfa kaydırıldığında hangi konumda vurgulamanın yapılacağını etkiler. - Erişilebilirlik: Scrollspy, erişilebilirlik açısından faydalıdır, çünkü kullanıcıların hangi bölümde olduklarını anlamalarına yardımcı olur.
Bootstrap Scrollspy, kullanıcı deneyimini artırmak için etkili bir yöntemdir ve uzun içeriklerin daha düzenli ve kullanıcı dostu bir şekilde sunulmasını sağlar.