Bootstrap ile Sticky Sidebar Yapımı

Sezai AlkanFrontend Developer

Bootstrap #bootstrap

Sticky Sidebar Yapımı 

Bootstrap İle sticky sidebar yapımı, web sayfanızda sidebar veya herhangi bir nesnenin, nesnenin bulunduğu div yüksekliğince ekran ile sekronize bir şekilde hareket etmesidir bunun için kullanmamız gereken bootstrap css class ı sticky-top class ıdır. 

Aşağıdaki örnekte header,section,footer gibi divlere yükseklik belirttim, bir sayfa varmış gibi daha iyi anlaşılabilmesi için.

Css kodları :

<style type="text/css">
        .header{
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .footer{
            width: 100%;
            height: 600px;
            text-align: center;
        }
        .section{
            height: 1500px;
        }
</style>

Html kodları :

<div class="container">
    <div class="row">
        <div class="col-md-12 bg-dark">
            <div class="header">
                <h1>Header</h1>
            </div>
        </div>
        <div class="col-md-8 bg-danger">
            <div class="section">
                İçerik Alanı
            </div>
        </div>
        <div class="col-md-4">
            <div class="sticky-top bg-info">
                Sticky Alanı
            </div>
        </div>
        <div class="col-md-12 bg-dark">
            <div class="footer">
                <h1>footer</h1>
            </div>
        </div>
    </div>
</div>

Eğer sticky özelliğini var olan bir sayfada deneyecekseniz yukarıdaki kodları kullanmayınız. sidebar bölümünüze

<div class="sticky-top bg-info">
    Sticky Alanı
</div>

Yukarıdaki kodları eklemeniz yeterli olacaktır. Örneği indirmek buraya tıklayabilirsiniz.