SCROLL EVENT JAVASCRIPT

ceritanya gini, saya uda upload karya saya dan baru belajar2 bikin web statis sendiri di [link]naufalhfzhn.github.io[/link] , bisa dicek disana.

dan ada 1 yang kurang, nah kurangnya itu pas fixed navbarnya discroll saya mau effect activenya sesuai dengan section yang ditujukan saat window.scroll

contohnya kyk gini harusnya yang active link yg blog https://drive.google.com/open?id=0B3gktyJDlqWQMWZtOFFydlo0MTA

untuk source webnya ada disini https://github.com/naufalhfzhn/naufalhfzhn.github.io

semoga jelas penjelasan saya mohon bantuannya ya teman2 terimakasih

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Diperbarui 6 tahun yang lalu

7 Jawaban:

mohon bantuannya saya up dulu

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

mohon bantuannya saya up dulu

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

Agan pernah pakai fungsi scrollTop? Coba cari referensinya. Intinya kita bind event scroll berdasarkan scrollTop, nanti ketika sampai di element yg dituju menu yg terkait dikasih class active, menu lain class active hilang. Begitu seterusnya.

Saya masih pakai hp, buka web agan kurang jelas (sori gan, kurang mobile friendly xD). Nanti kalau pakai laptop coba saya cek lagi.

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 6 tahun yang lalu

tapi untuk nentuin divnya berati kita manual?

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

alhamdulillah bang @rachmatsasongko uda bisa, tapi masih ada 1 masalah lagi ternyata, coba bang klik nav misalnya bagian aboutnya , klik kurang lebih 2 - 3 kali web langsung nge bug gitu, tapi pas di klik lagi bagian about nya nanti beres lagi , nah saya uda ngestuck banget nih bang puyeng hehe mungkin bang @rachmatsasongko bisa

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

menurut saya problemnya ada 2. 1. karena agan selalu jalanin 2 fungsi setiap menu di click, scrollDown dan scrollUp

anchor[0].onclick = function() {scrollDown('about');scrollUp('about') }

2. setting interval = 30 juga crusial.

klik pertama pasti jalan karena posisi scroll di atas, target pasti dibawah. scrollDown jalan dan berhenti di posisi target. Tapi sebetulnya problem sudah dimulai disini, posisi posY ga bisa benar2 sesuai dngan target karena intervalnya 30, pasti lebih sedikit. dan ketika klik berikutnya jalan, scrollDown scrollUp saling tumpuk karena posY ga pernah bisa pas sama target, jadinya clearTimeoutnya ga pernah jalan, ini yang bikin halaman jadi loncat2. coba intrvalnya diganti 1, walaupun scrollnya lambat tapi pasti berhenti pas di target dan ga akan ada problem di scrollnya.

solusinya bisa diatur dari click anchor, jangan langsung jalan keduanya. cek posisi scrollTop, kalau lebih kecil dari target scrollDown, kalau lebih besar scrollUp. solusi lain bisa juga tetap pakai keduanya, tapi interval diatur. kalau distance lebih dari 50 gpp pakai interval 30, kalau kurang dari itu intervalnya dikecilin.

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 6 tahun yang lalu

masih agak bingung bang, tapi ane uda nyari solusinya ane ganti script itu pake script dari link ini http://web.archive.org/web/20140213105950/http://itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript. Work sih , tapi ada yang beberapa gk mundeng sama code2nya hehe, nanti ane cari sendiri buat mahamin code2 itu , makasih ya bang uda mau bantu @rachmatsasongko

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban