CSS Trick: Membuat Menu(samping) Tetap Mengikuti Saat Halaman Discroll

Share:

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: 
sahretech
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"> ....


Sekian css tips dan trick kali ini. Semoga bermanfaat dan bagi kalian yang punya pertanyaan terkait dengan artikel di atas silahkan tinggalan komenter di bawah ini. Sampai jumpa di tutorial keren lainnya. Happy coding :)

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik