Cara Membuat Navigasi Divi Anda Mulai dari Bawah, Lalu Tetap Tetap di Atas Saat Menggulir

Dalam tutorial Divi hari ini kami akan menunjukkan kepada Anda, langkah demi langkah, cara membuat navigasi tetap di situs web Anda saat menggulir dan setelah Anda melewati ketinggian layar penuh Anda. Jika Anda mengikuti langkah-langkah dalam posting ini dan membuat ulang navigasi tetap, Anda akan melihat bahwa navigasi akan membawa efek interaksi yang bagus ke menu utama Anda dan ke situs web Anda secara umum.

Kita akan memulai dengan membuat navigasi vertikal normal di layar. Alih-alih berada di bagian atas halaman, navigasi ini akan didorong ke bagian bawah layar. Setelah menggulir dan setelah Anda melewati ketinggian menu di layar, Anda akan melihat bahwa menu akan berubah posisinya dan akan ditempatkan di bagian atas halaman. Setelah navigasi diperbaiki, navigasi akan tetap diperbaiki sepanjang sisa halaman. Tetapi setelah Anda menggulir kembali ke bagian pahlawan, navigasi akan berperilaku normal lagi dan akan ditempatkan di bagian bawah bagian pahlawan.

Anda bisa mengatakan bahwa halaman tersebut akan 'mengambil' menu di bagian bawah layar dan memberikan efek lanjutan yang Anda cari. Untuk membantu Anda memvisualisasikan hasil yang ingin kami capai, mari kita lihat hasil akhirnya:

Bagian Pahlawan: Modul Header Lebar Penuh dengan Mode Layar Penuh

Ada satu hal yang perlu dipertimbangkan ketika Anda akan menggunakan efek ini untuk situs web Anda; Anda memerlukan Modul Header mode layar penuh. Secara teoritis, Anda dapat menerapkan ini ke modul dan bagian lain juga, tetapi Anda harus membuat beberapa modifikasi untuk memastikan menu muncul di bagian bawah bagian itu. Opsi layar penuh yang ditawarkan Divi memastikan bagian pahlawan memenuhi layar (berapa pun ukuran layarnya), itulah mengapa kami menyarankan untuk menggunakannya jika Anda ingin menerapkan efek ini ke menu Anda.

Mulailah dengan membuka atau membuat halaman tempat Anda ingin menambahkan efek ini. Selanjutnya, buka Fullwidth Header atau buat dan buka tab Desain. Hal pertama yang akan Anda temukan di tab desain adalah subkategori Tata Letak. Silakan dan aktifkan mode Layar Penuh di subkategori itu.

Membuat Navigasi Tetap Saat Menggulir

Untuk menambahkan efek ke situs web kita, kita perlu menggunakan beberapa baris kode CSS dan beberapa baris kode jQuery. Kode CSS yang akan kita gunakan akan menempatkan navigasi di bagian bawah layar dan akan membuatnya berperilaku seperti footer biasa sebelum kode jQuery diaktifkan. Setelah itu, baris kode jQuery akan mengambil alih dari kode CSS khusus dan akan membiarkan navigasi berperilaku sesuai dengan posisi Anda di situs web.

Tambahkan Kode CSS yang Diperlukan

Kami akan mulai dengan menambahkan kode CSS yang diperlukan ke situs web kami. Secara umum, ada tiga cara untuk melakukan ini. Dua cara pertama membuat kode berlaku untuk seluruh situs web. Metode ketiga membuatnya bekerja untuk satu halaman saja.

Tambahkan Kode CSS Melalui Penyesuai Tema

Metode pertama yang akan kami tunjukkan memungkinkan Anda menambahkan kode melalui Penyesuai Tema. Ini adalah cara menambahkan kode yang tidak sering digunakan tetapi memiliki beberapa keuntungan. Salah satunya adalah segera setelah Anda menambahkan kode, Anda akan melihat perubahan terjadi secara real time.

Untuk menambahkan kode CSS, buka dashboard WordPress Anda > pergi ke Appearance > Customize > Scroll ke bawah tab dan buka tab Additional CSS > Tambahkan baris kode CSS berikut:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Tambahkan Kode CSS Melalui Opsi Tema

Opsi lain yang Anda miliki, yang juga paling umum digunakan, adalah menambahkan kode CSS ke Opsi Tema situs web Divi Anda. Setelah Anda menambahkan kode, itu akan berlaku untuk seluruh situs web. Jika Anda lebih suka mencari kemungkinan yang menambahkan efek ke satu halaman saja, lanjutkan ke kemungkinan berikutnya di mana Anda dapat menambahkan kode ke satu halaman tertentu.

Untuk menambahkan kode ke Opsi Tema Anda; buka dasbor WordPress Anda> Divi> Opsi Tema> Gulir ke bawah tab Umum dan rekatkan kode berikut ke dalam bidang CSS Kustom:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Tambahkan Kode CSS ke Satu Halaman Saja

Kemungkinan ini mungkin menarik jika Anda ingin menerapkan navigasi tetap ini ke satu halaman saja tetapi tidak ke seluruh situs web. Jika Anda menggunakan header lebar penuh di beranda saja, misalnya, Anda mungkin ingin menggunakan metode ini.

Buka halaman tempat Anda ingin menambahkan navigasi tetap saat menggulir. Selanjutnya, Anda akan melihat simbol berikut di sudut kanan builder:

Klik di atasnya dan Anda akan melihat layar muncul di mana Anda dapat membuat modifikasi ke seluruh halaman. Tambahkan kode berikut di kotak Custom CSS untuk membuatnya berlaku untuk halaman itu secara khusus:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Tambahkan Kode jQuery yang Diperlukan

Langkah selanjutnya yang ingin kita ambil adalah menambahkan kode jQuery ke situs WordPress kita. Kode ini akan mulai berfungsi sejak Anda menggulir. Kita dapat menambahkan kode jQuery dengan dua cara; melalui Opsi Tema atau melalui Modul Kode. Jika Anda ingin menambahkan kode ke satu halaman saja, Anda dapat menggunakan Modul Kode dalam kombinasi dengan kemungkinan ketiga yang kami sebutkan untuk kode CSS di posting ini.

Tambahkan Kode jQuery Melalui Opsi Tema

Untuk menerapkan kode ke semua halaman di situs web Anda, Anda dapat menambahkan kode ke Opsi Tema. Buka dasbor WordPress Anda > Buka Divi > Lanjutkan ke Opsi Tema > Buka tab Integrasi > Dan tempel kode berikut di kolom '<head> blog Anda':

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Tambahkan Kode jQuery Melalui Modul Kode

Jika Anda ingin menambahkan kode ke satu halaman tertentu, Anda dapat melakukannya melalui Modul Kode. Di bagian sebelumnya, di mana kami telah menambahkan kode CSS, Anda harus memilih opsi terakhir.

Kembali ke halaman itu dan tambahkan Bagian Standar ke bagian atas halaman Anda. Di dalam Bagian Standar itu, tambahkan Modul Kode. Anda sebenarnya dapat menempatkan bagian ini di mana pun Anda suka, tetapi jika Anda ingin menemukannya dengan cepat, kami sarankan Anda meletakkannya di bagian atas halaman Anda. Selanjutnya, salin dan tempel kode berikut ke dalam Kotak Konten Modul Kode Anda:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Dan itu saja! Kode sekarang seharusnya berfungsi, mengubah menu Anda, dan membuat situs web Anda sedikit lebih interaktif.

Pikiran Akhir

Dalam posting ini, kami menunjukkan kepada Anda cara membuat navigasi tetap saat menggulir. Kami memberi Anda beberapa baris kode CSS dan beberapa baris kode jQuery yang akan membantu Anda. Jika Anda telah mengikuti posting ini langkah demi langkah, Anda seharusnya bisa mendapatkan hasil akhir. Jika Anda memiliki pertanyaan atau saran untuk posting mendatang; jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh DenisXize / shutterstock.com