Latihan: Menerapkan Sticky Position pada Navigation List

Wah, ternyata ada satu latihan kita dalam modul ini yang masih belum dilakukan. Ada satu fitur lagi yang akan kita terapkan dan kami yakin dapat membuat Anda takjub. Penasaran, kan? Langsung saja, ini dia!

Tujuan

Ada satu fitur yang mungkin perlu diterapkan lagi pada halaman profil yang kita buat. Pada halaman profil, ada daftar navigasi untuk mengarahkan user pada informasi yang dipilih secara langsung. Namun, navigasi tersebut agak repot diakses ketika pengguna berada di bagian bawah halaman setelah melakukan scrolling. Hal ini karena navigasi tersebut selalu berada pada tempatnya atau tidak berpindah (di bawah jumbotron website). User perlu scroll/kembali ke atas untuk meraihnya.

Dari permasalahan di atas, sepertinya kita perlu mengatur navigasi agar menempel pada jendela browser sehingga navigasi dapat tetap dicakup oleh pengguna untuk digunakan.

Terdapat satu nilai properti position yang belum dibahas pada pembahasan positioning, yaitu sticky positioning. Ini merupakan nilai “kombinasi” dari relative positioning dan fixed positioning. Dengan ini, membuat navigasi dapat melekat pada jendela browser (layaknya fixed position), tetapi posisi awalnya tetap menepati posisi di tempat ia seharusnya berada (layaknya relative position).

Jadi, tampilan navigasi dapat dimunculkan seperti hasil pada gambar berikut.

Alur Latihan

Berikut adalah alur latihan kali ini.

1. Membuka hasil latihan terakhir dengan VSCode.
2. Menerapkan position sticky pada elemen <nav>.
3. Menerapkan display inline pada elemen <header> agar elemen <nav> dapat tertahan dan keluar dari elemen tersebut.
4. Menjalankan dokumen HTML pada browser.

Latihan Menerapkan Sticky Position pada Navigation List

Berikut adalah daftar langkah latihan yang perlu diikuti dan disimak agar latihan berjalan dengan baik.

1. Silakan buka proyek Halaman Profil terakhir dengan VSCode.
2. Pertama, kita tambahkan properti position dengan nilai sticky dan top dengan nilai 0 pada elemen <nav>.
   
   

   /* Kode lainnya disembunyikan... */
    
   nav li {
     display: inline;
     list-style-type: none;
     margin-right: 20px;
   }
    
   nav {
     background-color: #00a2c6;
     padding: 5px;
    
     position: sticky;
     top: 0;
   }
    
   main {
     padding: 20px;
    
     overflow: auto;
   }
    
   /* Kode lainnya disembunyikan... */

   
   Nilai top: 0 diperlukan agar elemen navigasi selalu berada di atas jendela browser saat user melakukan scrolling.
   
   
3. Namun, ini masih belum cukup dan berhasil. Navigasi bar masih belum tertahan ketika user menggulir halaman website. Bagaimana agar navigasi dapat menempel pada seluruh halaman?
   
   Pada latihan sebelumnya, kita telah membuat elemen <header> sebagai induk dari elemen <nav> dan elemen <div> yang memiliki atribut class dengan nilai jumbotron. Elemen <header> tersebut perlu diterapkan properti display dengan nilai inline. Silakan tuliskan rule berikut pada berkas style.css.
   
   

   /* Kode lainnya disembunyikan... */
    
   aside {
     float: right;
     width: 25%;
     padding-left: 20px;
   }
    
   header {
     display: inline;
   }
    
   @media screen and (max-width: 1000px) {
     #content,
     aside {
       width: 100%;
       padding: 0;
     }
   }

   
   
4. Setelah menerapkannya, navigasi pada halaman profil akan tampak seperti pada gif berikut.
   
   

Menakjubkan! Anda sudah menyelesaikan latihan ini untuk mencegat elemen navigasi tetap tampil pada viewport atas. Kali ini, user sangat senang dan tidak repot lagi untuk meraih daftar navigasi. Sebagai referensi lain, Anda dapat memperkaya pengetahuan dengan mengacu pada Sticky positioning dari MDN.