Bootstrap 4 sticky sidebar(Sabit yan blok)

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
466
Tepkime puanı
92
Puanları
28
Evet yapiskan yan blok da denilen tasarimi kabaca anlatayim dedim bunun icin
bootstrap kulanilmasi lazim

b-stikey.png


Html kodlari

Kod:
<article>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="title-section">
                    <h1>Basic Sticky Sidebar with Bootstrap 4</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-7">

                <div class="content-section">
                    <h2>Content Section</h2>
                </div>
            </div>
            <div class="col-5">

              <div class="sidebar-item">
                <div class="make-me-sticky">
                  <h3>Item 1</h3>
                </div>
              </div>
          

            </div>
        </div>
    </div>
</article>

css kodu

Kod:
.content-section {
  min-height: 2000px;
}
.sidebar-section {
  position: absolute;
  height: 100%;
  width: 100%;
}


.sidebar-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	/* Position the items */
	// &:nth-child(2) { top: 25%; }
	// &:nth-child(3) { top: 50%; }
	// &:nth-child(4) { top: 75%; }
}


.make-me-sticky {
  position: -webkit-sticky;
	position: sticky;
	top: 0;
    
  padding: 0 15px;
}



/* Ignore This, just coloring */
body {
  background: #fff;
}

article {
  background: #f1f1f1;
  border-radius: 12px;
  padding: 25px 0 600px;
}


.title-section, .content-section, .sidebar-section {
  background: #fff;
  // border-radius: 12px;
  // border: solid 10px #f1f1f1; 
}

.title-section {
  text-align: center;
  padding: 50px 15px;
  margin-bottom: 30px;
}

.content-section h2 {
  text-align: center;
  margin: 0;
  padding-top: 200px;
}

.sidebar-item {
  text-align: center;
  
  h3 {
    background: gold;
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0 100px; 
    border-bottom: solid 1px #fff;
  }
}

DEMO
 
Geri
Üst Alt