Kita buka lagi source code kita dari pelajaran sebelumnya, dan kita akan mencoba untuk menggunakan position sticky.

Salah satu contoh penggunaan position sticky, bisa kita gunakan pada halaman sales letter. Misalkan pada bagian atas kita memberikan gambar dari produk kita, setelah itu kita menjelaskan manfaatnya, spesifikasi produk dan kelebihannya dibandingkan dengan produk lainnya. Dan kemudian pada bagian tengah sales letter, kita bagian yang namanya call-to-action. Dimana pada bagian ini kita akan meminta pengunjung situs kita untuk melakukan suatu aksi yang sesuai dengan tujuan dari situs kita. Biasanya sales letter bertujuan untuk menjual produk, jadi bagian call-to-action-nya biasanya berisikan link atau button untuk membeli produk.

Sebagai contoh pada source code kita, misalkan setelah judul kecil kedua kita tambahkan bagian call-to-action. Kita buka kode HTML. Setelah section Judul Kecil Kedua, kita tambahkan section baru dengan nama kelas call-to-action.

Di dalam section, kita berikan tag h2 dengan konten Tertarik dengan Produk Ini?. Lalu kita tambahkan paragraf dengan konten Klik disini untuk memesan sekarang juga. Kita tambahkan achor tag dengan tujuan #.

Selanjutnya kita buka kode CSS dan kita tambahkan selector class call-to-action. Pertama kita beri warna latar belakang dahulu misalkan lightyellow. Lalu kita tambahkan border bottom dengan nilai 1px solid yellow. Kita simpan dan lihat hasilnya di browser.

Sekarang kita sudah memiliki bagian call to action. Namun masih menggunakan position static ya. Jadi bagian ini tetap berada di dalam flow dokumen, pada saat kita menggeser scroll.

Kita tambahkan properti position: sticky. Kita simpan. Dan kira-kira seperti apa hasilnya? Kita coba scroll ke bawah. Ternyata masih tetap seperti semula ya. Karena kita belum memberikan informasi tambahan bahwa sticky-nya mau menempel ke bagian mana dari browser? Apakah atas, bawah, kiri atau kanan?

Kita tambahkan satu buah properti lagi yaitu top dengan nilai 0. Artinya sticky akan menempel ke bagian atas layar. Kita simpan dan refresh browser lagi. Sekarang kita coba scroll ke bawah. Nah sekarang, pada saat posisi bagian call-to-action sudah mencapai bagian atas browser, maka bagian tersebut akan tetap menempel di atas. Jadinya pada saat kita browsing lebih jauh ke bagian bawah, kita tetap bisa memesan produk dengan cara mengklik bagian sticky yang tetap muncul di bagian atas browser.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.