Belajar CSS 3 Layout

Position Sticky

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

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.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.