Bootstrap 4 sticky sidebar(Sabit yan blok)

[orhan]

Evet yapiskan yan blok da denilen tasarimi kabaca anlatayim dedim bunun icin
bootstrap kulanilmasi lazim

Html kodlari

<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

.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