Bootstrap Scrollspy Kullanımı

nhtctn nhtctn

Yatay 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>

Yorum yazın

BENZER YAZILAR