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.
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:
- container
- content
- 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: