Bootstrap 4 sticky sidebar(Sabit yan blok)

Started by orhan, Mar 08, 2019, 08:02 pm

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

orhan

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



Html kodlari

Code Select
<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

Code Select
.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