Cuộn liên tục qua các trang trong tài liệu của bạn thay vì chuyển qua một hoặc hai trang cùng một lúc. Đây cũng là một chế độ mặc định. Tắt hoặc bật tính năng này bằng cách chọn Xem > Liên tục hoặc bằng cách nhấp vào mục menu Thanh bên. Cài đặt này vẫn tồn tại trên các tài liệu mới mở
thanh cuộn
Thanh cuộn xuất hiện khi chế độ xem tài liệu không vừa với nội dung của trang trong cửa sổ hiện tại. Bạn có thể nhấp và kéo thanh cuộn để đi đến phần tài liệu bị ẩn hoặc sử dụng cử chỉ trên bàn di chuột
Dụng cụ cầm tay
About
Lưu ý. khi thanh Nav you to be fixed sẽ gặp trường hợp khi nhấp vào nội dung muốn cuộn đến sẽ bị thanh Nav overup. Mình đã có cách xử lý cho trường hợp này, các bạn đọc tại đây
Sau đó ta tạo một section chứa id để click vào Nav sẽ tự động cuộn đến section này. Ví dụ ta tạo một phần có id là dịch vụ
Services we offer
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut optio velit inventore, expedita quo laboriosam possimus
ea consequatur vitae, doloribus consequuntur ex. Nemo
assumenda laborum vel, labore ut velit dignissimos.
Mình đã tạo sẵn HTML và kết quả là DEMO trên 😄👉
Tiếp tục theo ta đến phần JavaScript
Đầu tiên ta sẽ lấy tất cả các thẻ chứa href đến các phần và các phần chứa id
const navItems = document.querySelectorAll['.nav-link'];
const sections = document.querySelectorAll['.section'];Sau khi lấy xong ta thêm event scroll cho window
Mình truyền thụ động. đúng để cải thiện hiệu suất cho cuộn. Tìm hiểu thêm tại đây
Tiếp theo ta cần xử lý. Get the position of section and id of it. To get the position of section so with top mình dùng offsetTop
Mỗi phần sẽ có vị trí khác nhau, top = section.offsetTop - 50 sẽ là vị trí của phần. Lí do mình bỏ đi 50px là do thanh Nav có chiều cao là 50px, Ta sẽ bỏ chiều cao của thanh Nav đi
Tiếp theo ta sẽ lấy href của nav-item và id của section
When used navItem. href ta sẽ nhận được toàn bộ đường dẫn như sau
//127.0.0.1:5500/scrollNav/index.html#about. Vì mình chỉ muốn lấy #about cho giống với id đã đặt cho section nên ta sẽ sử dụng match[] và truyền biểu thức chính quy vào. Kết quả trả về trong trường hợp trên là một chuỗi các chuỗi đã khớp
Tiếp theo ta sẽ so sánh chuỗi lấy được với chuỗi id của phần
Add condition if ta scroll to the position of section ta will add animation
Go here ta near Successful. 🔥. Tuy nhiên, điều kiện để chỉ thêm lớp hoạt động khi cuộn đến phần vị trí, thay vào đó còn điều kiện để xóa lớp, ví dụ ta cuộn về đầu trang không phải vị trí của mỗi phần trên kia thì sao 🧐
Ta chỉ cần thêm các điều kiện sau để hoàn thành Thanh cuộn điều hướng 👇
const top = section.offsetTop - 50;
const html = document.documentElement;
const height = section.offsetHeight;
if [html.scrollTop >= top && top + height >= html.scrollTop] {
hrefNav === idSection
? navItem.parentElement.classList.add['active']
: navItem.parentElement.classList.remove['active'];
} else {
hrefNav === idSection &&
navItem.parentElement.classList.remove['active'];
}Mình sẽ giải thích điều kiện trên
html.scrollTop >= top && top + height >= html.scrollTop. Điều kiện này xảy ra khi ta cuộn đến vị trí của phần và lúc này vị trí cuộn vẫn ở phần nội dung chưa vượt ra ngoài
If scrolling too
top + height, thì có nghĩa là vị trí cuộn hiện tại đã thoát khỏi nội dung của phần
Ngược lại tức là ta đã rời khỏi phần định vị => Ta sẽ xóa lớp đang hoạt động của mục Nav vừa thêm lớp đang hoạt động. nếu thắc mắc các bạn hay bỏ qua đoạn hrefNav === idSection rồi scroll sẽ hiểu ^^
Đây là mã hoàn chỉnh của chúng tôi
Đây là kết quả ^^
Kết luận
Như vậy là chúng ta đã hoàn tất thành công Scrolling Nav. Khá hay ho đúng sai 😄. Nếu có thắc mắc gì các bạn có thể liên hệ mình nhé 🔥