Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

Bootstrap ile Sticky Sidebar Yapımı

Sezai AlkanFrontend Developer

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.

Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com