Bài tập javascript 8 – Bắt sự kiện cuộn chuột và xử lý hiệu ứng

1
531

bài tập javascript 8 này, mình và các bạn sẽ xử lý hiệu ứng khi cuộn chuột, ngoài click chuột thì sự kiện scroll cũng được dùng để xử lý nhiều vãi ra :D. Kiểu như là khi chúng ta lăn chuột thì một cái gì đó bay ra chẳng hạn. Mình xin được bắt đầu bài viết :v.

bài tập javascript 8

Kiến thức cần có:

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM
  6. Bắt sự kiện cuộn chuột

Vì cái bắt sự kiện cuộn chuột này khá đơn giản nên mình không viết bài về nó :D. Chúng ta chỉ cần nhớ 2 3 câu lệnh gì đó thôi.

  • Để bắt sự kiện khi cuộn chuột chúng ta sử dụng phương thức Window.addEventListener("scroll",function(){ //các câu lệnh })
  • Xác định vị trí:

pageYOffset  xác định vị trí theo chiều dọc ( thường dùng cái này nè !)

pageXOffset  xác định vị trí theo chiều ngang

Bài tập javascript 8 – Bắt sự kiện cuộn chuột và xử lý hiệu ứng

Mô tả bài tập: Khi lăn chuột đến vị trí > 300 thanh menu nở ra, khi lăn chuột quay lại vị trí  < 300 thanh menu trở lại bình thường. Trước tiên chúng ta cứ làm bài đơn giản để nền vững đã, rồi xây cao sau :D.

Demo:

Click vào bài tập js 8 để xem kết quả.

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

Code CSS:

Code js:

Kết quả: 

bài tập javascript 8

File js :

  • Đầu tiên mình sẽ truy xuất phần tử menu, để tí add class vào thôi
  • Khởi tạo biến trangthai="300" để đây tí nói sau 😀
  • Bắt sự kiện cuộn chuột bằng phương thức window.addEventListener(“scroll”,…)
  • Tạo biến x để xác định vị trí bằng lệnh pageYOffset
  • Dùng câu lệnh if else để xử lý nếu x > 300 thì add class “menutora” và nếu khác thì remove “menutora” đi.
  • Chúng ta cần xét thêm điều kiện của biến trangthai mục đích của việc này là để câu lệnh chỉ thực thi lệnh add class và remove class đúng một lần mỗi khi điều kiện của x đúng.

Vậy là tôi đã làm xong Bài tập javascript 8 – Bắt sự kiện cuộn chuột và xử lý hiệu ứng rồi :B Mình sẽ quay trờ lại với những hiệu ứng khác, có thắc mắc gì cứ để lại comment phía dưới nha. Mình xin được dừng bài viết tại đây.

Xem bài viết tiếp theo tại đây.

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Thịnh Minh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Thịnh Minh
Member
Thịnh Minh

Cho e hỏi là, khi e thêm thuộc tính position:fixed thì grid nó k hoạt động dc nữa ạ. Ví dụ như khi e thêm thuộc tính grid-column cho chữ logo thì nó k hoạt động ạ