Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part1 adalah suatu tampilan website yang memiliki satu halaman dengan beberapa menu. Dimana ketika kita melakukan klik pada menu maka  secara otomatis website kita melakukan scroll ke arah menu yang kita pilih. Disini ada 2 hal yang harus kita lakukan untuk membuat website satu halaman menggunakan scroll, yaitu membuat sticky menu atau menu dengan posisi fix atau tetap ketika kita melakukan scroll pada website dan membuat scroll website ketika menu kita klik.

Langkah pertama tentang Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part1 kita buat struktur htmlnya seperti pada gambar berikut ini.

Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part1

Kemudian teman-teman buat style cssnya seperti pada script berikut ini.

Tampilannya akan tampak seperti pada gambar di bawah ini.

Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part1

Jika sudah selesai maka kita akan membuat sebuah fungsi untuk membuat sticky menu dengan menggunakan jquery.

Jika teman-teman perhatikan lagi scriptnya, disini saya membuat variable heightHeader untuk menyimpan tinggi dari header. Dimana tinggii header saya dapat dengan menggunakan fungsi height() setelah ini saya membuat function atau fungsi yang didalamnya ada kondisi jika saya melakukan scroll pada website dan tinggi scroll melebihi tinggi header maka css yang saya berikan pada menu akan dijalankan dan di sambung dengan slideDown cepat. Jika keadaan false maka function callback slideUp akan dijalankan.

Nah untuk menjalankan fungsi stickyNav yang sudah saya buat maka saya buat function scroll pada window untuk dapat menjalankan fungsi tersebut.

Demikian artikel tentang Cara Membuat Website Satu Halaman Menggunakan Scroll Jquery Part1. Kita akan lanjutkan di pembahasan selanjutnya dengan membuat fungsi scroll ketika menu di klik di bagian kedua. Sampai jumpa.