Trik sticky sidebar halaman blog murni CSS

Sticky sidebar selalu melibatkan Javascript. namun ternyata CSS dapat melakukannya dengan sangat baik, responsif dan lebih ringan. Saya tidak akan memberikan demo melalui template karena template dummy sudah over. jadi mulai sekarang kita akan melakukannya melalui codepen.

ilustrasi halaman blog dengan fsidebar

Adapun pengaturan CSS yang harus kita pasang ke dalam template adalah sebagai berikut:
* {
box-sizing: border-box;
}
header{
height: 50px;
background: whitesmoke;
}


.container{
display: flex;
max-width: 800px;
margin: 0 auto;
justify-content: space-between;
@media (max-width: 800px){
width: 100%;
padding: 30px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}


.images{
padding: 30px 0;
flex-grow: 1;
flex-basis: 400px;
text-align: center;
}


.sidebar{

/* Sticky */
position: sticky;
top: 0;
height: 100vh;

padding-top: 0px;
flex-basis: calc(100% - 400px - 60px);
flex-grow: 1;


/* Mobile: Unstick it and move it up */
@media (max-width: 800px){
order: -1;
position: static;
height: auto;
width: 100%;
}
h1{
font-size: 40px;
line-height: 1;
}
ul{
padding: 0;
li{
list-style: none;
padding: 10px;
color: white;
font-size: 12px;
margin-bottom: 1em;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: box-shadow 200ms linear;
&:hover{
box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
}
}
}
}
Nah jika ada pengaturan CSSnya, maka harus ada HTML yang 'diaturnya' bukan? Pengaturan CSS dapat di sesuaikan dengan Class atau ID HTMLnya. Kalian dapat mencocokan class-class berikut antara HTML dan pengaturan CSSnya:
  1. container
  2. content
  3. sidebar
Contoh HTMLnya:
<main>
<header></header>
<div>
<div class="container">
<section class="conten">
<!-- disini posisi konten, text, gambar, video dsb -->
</section>
<aside class="sidebar">
<h1>Pink</h1>
<p>Shades</p>
<ul>
<li style="background: #F2BEC0;">F2BEC0</li>
<li style="background: #F1A5AB;">F1A5AB</li>
<li style="background: #DB7A84;">DB7A84</li>
<li style="background: #F35BA5;">F35BA5</li>
<li style="background: #CEA39A;">CEA39A</li>
<li style="background: lightpink;">lightpink</li>
</ul>
</aside>
</div>
</div>
</main>
Tentu saja untuk membuatnya bekerja, kita harus menyesuaikan pengaturan CSS dengan HTML template kita sendiri, yang ini hanya contoh dan untuk membuktikan bahwa ia bekerja berdasarkan pengaturan CSS ini, Silahkan kunjungi DEMO berikut dibawah:




Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak