nhtctnYatay scroll barı (kaydırma çubuğu) hareket ettirdiğimizde görüntülenen içerik ile ilişkili link etiketini aktif hale getirmek için kullanıyoruz.
** data-spy=”scroll” diyerek body için bir scrollable bölge oluşturuyoruz. Bunun yerine kapsayıcı bir div etiketide kullanılabilir.
** data-target=”.navbar” ile belirttiğimiz alan içinde denetlenecek olan .navbar sınıfına sahip nesneyi belirtiyoruz.
** data-offset=”50” ile scroll pozisyonunu 50px aşağıya öteliyoruz.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="home" class="bg-success" style="padding: 400px 0px" ;>
<div class="container">
<h1>Home</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque molestiae assumenda recusandae nam fugiat, pariatur quo, nulla a tempora officiis! Rerum ea obcaecati porro amet, labore! Ad quae sint officiis?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aliquid tenetur quaerat, pariatur sunt rerum voluptas ab iure, assumenda facilis dolores perferendis odio illo? Reiciendis consequatur aliquam, quas ut mollitia.
</p>
</div>
</div>
<div id="about" class="bg-danger" style="padding: 400px 0px" ;>
<div class="container">
<h1>About</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque molestiae assumenda recusandae nam fugiat, pariatur quo, nulla a tempora officiis! Rerum ea obcaecati porro amet, labore! Ad quae sint officiis?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aliquid tenetur quaerat, pariatur sunt rerum voluptas ab iure, assumenda facilis dolores perferendis odio illo? Reiciendis consequatur aliquam, quas ut mollitia.
</p>
</div>
</div>
<div id="services" class="bg-warning" style="padding: 400px 0px" ;>
<div class="container">
<h1>Services</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque molestiae assumenda recusandae nam fugiat, pariatur quo, nulla a tempora officiis! Rerum ea obcaecati porro amet, labore! Ad quae sint officiis?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aliquid tenetur quaerat, pariatur sunt rerum voluptas ab iure, assumenda facilis dolores perferendis odio illo? Reiciendis consequatur aliquam, quas ut mollitia.
</p>
</div>
</div>
<div id="contact" class="bg-info" style="padding: 400px 0px" ;>
<div class="container">
<h1>Contact</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque molestiae assumenda recusandae nam fugiat, pariatur quo, nulla a tempora officiis! Rerum ea obcaecati porro amet, labore! Ad quae sint officiis?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aliquid tenetur quaerat, pariatur sunt rerum voluptas ab iure, assumenda facilis dolores perferendis odio illo? Reiciendis consequatur aliquam, quas ut mollitia.
</p>
</div>
</div> <style>
body {
position: relative;
}
</style>
