Các bạn giúp mình cái cách xử lý jquery cái

Pha_Hoai · June 23, 2017, 7:38am

Xin chào các bạn, mình là người mới học đã học qua html,css và javascript và minh định test một ít về thư viện jquery cụ thể hơn là set css cho thanh scroll, đây là sorce code của mình:
HTML:

CSS của mình

Cuối cùng là đoạn jquery mà mình sử dụng để thao tác với thanh scroll trên trang:

Mục đích mình viết đoạn script để khi kéo thanh scroll xuống thì thanh menu sẽ được đặt position là fixed và chiều rộng + background nó sẽ thay đổi theo ý mình.
Vấn đề của mình là khi minh chạy web thì đoạn jquery mà mình viết nó không được thưc hiện và mình đã test source trên web nhưng vẫn không thấy class mới mà mình add vào jquery . Bạn nào có thể xem giúp mình vấn đề của mình ở đâu để sửa được không?

Dark.Hades · June 23, 2017, 8:35am

Bạn đưa toàn bộ code file html vào jsbin rồi dẫn link vào bài viết này đi.
Chụp ảnh thế này thì không ai giúp nổi đâu vì ai cũng lười viết cả.

Dao_An · June 23, 2017, 10:37am

nhìn ảnh hoa cả mắt, b có thể up code lên jsfiddle.net; jsbin; codepen nhìn cho nó trực quan. Chứ như này thì chả lẽ m phải gõ lại code để fix cho bạn @@

Thuc_Nguyen_tan · June 23, 2017, 3:15pm

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Cái này đúng ý bạn luôn, thêm cái wrap vào

    <div style="width:800px; margin:auto;">
.....
</div>

ps : Nên nghiên cứu cái bootstrap xài luôn bạn

Vong_Hoang_Tuong · June 24, 2017, 8:26am

Code của bạn là khi cuộn trang thì thêm class test. Nhưng nó thêm ngay khi cuộn thì sao bạn không CSS nó dạng fixed luôn cho rồi.
Nếu ý của bạn là muốn khi cuộn xuống một đoạn (kiểu như qua banner) thì menu chuyển thành dạng fixed. Thì code của bạn thiếu phần tính khoảng cách khi cuộn.
Nếu lỗi thì có thể do trình duyệt nữa, có khi bạn gắn event scroll vào html mới chạy. Thử dùng $(window).scroll(function() { xem sao.
Hi vọng bạn không quên chèn thư viện jQuery vào mã nguồn và viết code bên dưới nó.