Halo semuanya, kembali lagi di sahretech. CSS trick kali ini kita akan membahas cara membuat element tetap mengikuti saat discroll ke bawah atau ke atas. Model seperti ini biasanya digunakan untuk membuat menu, tombol share, atau tombol costumer service tetap berada di posisinya tetapi tetap mengikuti saat halaman discroll ke atas ataupun ke bawah, penasaran?, ayo ikuti tutorialnya berikut ini.
Membuat Menu(samping) Tetap Mengikuti Saat Discroll
Pada contoh kali ini saya akan membuat sebuah halaman html sederhana
yang akan menampilkan menu di sebelah kiri layar dan menampilkan content
di sebelah kanan layar. Dan di contoh kali ini pula saya akan menggunakan
bootstrap agar halaman terlihat lebih cantik dan rapih.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<br>
<div class="row col-12">
<div class="col-lg-3">
<ul class="list-group" style="position:sticky; top:10px;">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="col-lg-9">
<div class="container">
<div class="card">
<div class="card-body">
<h1 class="card-title">Lorem Ipsum</h1>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie,
metus a rhoncus dapibus, nisl lorem finibus sapien, eu tincidunt est tellus in urna. Integer
lobortis quam sed lectus placerat efficitur. Fusce dictum mattis lacus, ac venenatis ligula
aliquet sit amet. Donec faucibus dictum urna non eleifend. Duis a auctor turpis. Fusce
semper vulputate vestibulum. In volutpat lacinia venenatis. Pellentesque in turpis
convallis, tincidunt neque id, elementum dui. Aenean nec laoreet enim, eget iaculis metus.
Vestibulum eget lobortis quam. Aliquam ut arcu nec ligula vestibulum facilisis eu vel nibh.
Sed sagittis leo eu mi pharetra interdum.
<br><br>
Maecenas vitae risus vel ante congue laoreet et at elit. Phasellus luctus accumsan finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet egestas quam, a
tincidunt sapien tempor at. Mauris quis semper velit, vel tempus lectus. Proin quis
condimentum urna. Pellentesque ut dui nec ex finibus faucibus. Vestibulum eleifend ante nec
felis tempus, sit amet imperdiet dui varius. Donec at felis porta quam lobortis pulvinar ut
non diam. Cras orci nibh, efficitur in mollis sit amet, vestibulum vitae nunc. In volutpat,
tortor vel viverra volutpat, lorem risus interdum sapien, ut aliquet lorem dolor eget nibh.
In purus dui, eleifend congue dui rhoncus, feugiat dapibus dolor. Integer semper neque
felis, eget bibendum quam pharetra at. Etiam quis dui neque.
<br><br>
Vestibulum facilisis venenatis ex, quis luctus massa efficitur vitae. Curabitur eu mi
faucibus mi rutrum aliquam in sed magna. Nulla bibendum pulvinar mi ac tempus. Maecenas
scelerisque consectetur nisl, at vestibulum diam posuere eu. Praesent in aliquet massa, sed
fringilla neque. Morbi vehicula lectus mattis, pellentesque erat id, condimentum massa.
Aliquam cursus rutrum purus vel vestibulum. Maecenas risus mi, tristique posuere sodales
nec, sodales maximus arcu. Quisque porttitor velit quis risus luctus, nec finibus mauris
commodo. Vivamus feugiat vulputate turpis eget faucibus.
<br><br>
Proin dictum, risus et tristique consequat, orci libero commodo metus, pulvinar interdum
turpis tellus tempus mauris. Mauris mollis, erat in malesuada finibus, nisi elit convallis
elit, ac suscipit leo sem ut magna. Maecenas auctor sem fermentum massa feugiat, a lacinia
libero sagittis. Nam eu tortor eget elit lobortis elementum at vel ex. Quisque quis neque et
nibh congue venenatis. Etiam pellentesque lorem eu facilisis ultricies. Nulla convallis
fringilla vulputate.
<br><br>
Nam fringilla nisl non felis suscipit vestibulum. Integer eget justo in quam posuere
dapibus. Donec faucibus arcu quis lorem pretium, at mattis ex tempor. Aliquam vel orci sem.
Donec non sollicitudin orci. Vestibulum tempor, sapien eu porta lacinia, enim purus ornare
lorem, vel tincidunt velit augue quis risus. Aliquam nulla nulla, efficitur sit amet libero
vel, molestie vestibulum purus. Duis congue, nisl et aliquam auctor, turpis ligula tempor
massa, sit amet facilisis nibh lorem vel ex. Integer sed massa a sapien aliquam luctus sit
amet in magna. Donec vel eros in velit tincidunt bibendum. Vivamus non velit quis tellus
tristique rhoncus sed eu massa. Ut a massa et magna imperdiet tincidunt. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In cursus sapien non
ipsum volutpat, varius rhoncus massa condimentum. Praesent non finibus lacus.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<br><br>
</div>
</div>
</div>
</body>
</html>
Simpan file di atas lalu jalankan di browser kalian, maka hasilnya akan tampak seperti gambar di bawah ini:
 |
| Hasil akhir, dimana menu di samping tetap mengikuti saat halaman discroll |
Perhatikan script di bawah ini, script di bawah ini adalah potongan css dari script di atas.
....
<ul class="list-group" style="position:sticky; top:10px;">
....script tersebut adalah script yang kita butuhkan untuk membuat element dapat terus mengapung di posisinya saat halaman discroll ke atas ataupun ke bawah. Dalam studi kasus lainnya, sematkan css tersebut pada element yang diinginkan. Catatan: Dibutuhkan cara yang berbeda untuk membuat kotak pesan yang mengapund di bawah halaman seperti customer service.
Membuat Menu(samping) Tetap Mengikuti Saat Halaman Discroll dengan Bootstrap
Bootstrap juga telah menyediakan fungsi serupa dengan penulisan script yang lebih singkat. Kalian tinggal ganti script css sebelumnya. dan sematkan ke dalam class element yang diinginkan
....
<ul class="list-group sticky-top">
....
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi