Trang chủ Lập trình Javascript - HTML Nhận diện trạng thái đi lên hay đi xuống khi chạy liên...

Nhận diện trạng thái đi lên hay đi xuống khi chạy liên kết đến thẻ ID

Để liên kết một phần nào đó trên cùng 1 trang ta thường dùng liên kết cho thẻ <a> kiểu là: <a href=”#footer”> trong đó footer là ID của mục đó. Khi người dùng click vào thẻ <a> có liên kết như thế thì sẽ nhảy đến mục được gắn ID tương ứng. Để mượt mà hơn trong quá trình di chuyển thì ta thường kết hợp với hàm animate() trong jQuery. Tuy nhiên bài viết này không xoay quanh vào vấn đề đó mà chia sẻ một câu chuyện về việc giải quyết cho một yêu cầu của khách hàng liên quan đến việc này.

Khách hàng có yêu cầu là giữ nguyên menu trên đầu trang (header) khi scroll xuống. Lúc đầu là vậy tuy nhiên về sau họ yêu cầu khi scroll xuống thì ẩn còn khi scroll lên thì hiện. Cũng giản đơn thôi, mình chỉ cần nhận diện hành động scroll lên hay scroll xuống và viết hàm. Nếu như giữ nguyên header tức là lúc cũng hiện thì mình sẽ có 1 cao của header cố định để viết vào mã nhưng cứ ẩn hiện thì sẽ lúc có giá trị lúc sẽ bằng 0. Và rắc rối xảy ra là khi click để đi đến các thẻ ID thì cần phải nhận diện là thẻ đó đang nằm ở vị trí nào: Nếu nó đang nằm dưới thì phải trừ đi chiều cao của cái header còn nếu nó nằm trên thì phải cộng thêm chiều cao của cái header thì scroll mới đúng với vị trí thẻ mà không bị cách quá xa (header bị ẩn) hoặc bị che mất một phần (header xuất hiện).

Ngẫm… ngẫm…. (Giờ ngồi nghĩ lại đúng là đầu óc già cả vì vấn đề này đơn giản mà cũng phải nghĩ) và giải pháp như sau: Tính chiều cao vị trí hiện tại của màn hình đang dừng, tình chiều cao vị trí thẻ ID sẽ đi đến. Sau đó so sánh chiều cao vị trí hiện tại trừ với chiều cao vị trí thẻ ID là biết được mình sẽ đi lên hay đi xuống và gán giá trị chiều cao cần trừ ra để nhảy đến thẻ ID cho chính xác.

Chúc các bạn thành công.

Huỳnh Mai Anh Kiệt

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Cách sắp xếp lại hình ảnh trong album trên Facebook

Mặc định khi upload ảnh lên một album trên Facebook thì hình ảnh upload lên trước sẽ hiển thị trước, hình ảnh upload lên...

Những điều cần biết về ngành Công nghệ thông tin

Một kỳ tuyển sinh đại học lại sắp đến và nếu bạn có đam mê về ngành Công nghệ thông tin nhưng chưa hiểu...

Cách tải tập tin torrent trên điện thoại di động và máy tính bảng

Nếu bạn đang tìm cách tải xuống những tập tin có dung lượng lớn thì sẽ không có cách nào tốt hơn là việc...

Hàu nướng 18 vị

Quán Bếp Hana, 59A Lý Thường Kiệt, Tp.Quy Nhơn có không gian nhỏ nhưng trang trí hiện đại, ấm cúng. Quán phục vụ rất...

Cách nén và giải nén trên Android

Không phải tất cả các tập tin PC đều hoạt động trên điện thoại thông minh hoặc máy tính bảng Android của bạn nhưng...

BẠN XEM CHƯA

Lấy địa chỉ thư mục của tập tin đang thực thi

Để lấy địa chỉ hiện tại trên thanh địa chỉ ta có thể dùng hàm Và ta hoàn toàn có thể dùng kết hợp các...

Xét lại giới hạn thời gian và dung lượng cho tập tin tải lên bằng .htaccess

Khi sử dụng một trình quản lý nội dung (CMS) như Joomla, WordPress thỉnh thoảng bạn sẽ gặp thông báo lỗi Fata Error kèm...

15 lập trình viên bạn nên theo dõi trên Twitter

Kỹ năng lập trình phát triển thông qua việc trao đổi kiến thức cũng như kinh nghiệm với cộng đồng lập trình viên. Twitter...

Kiddle – Trang tìm kiếm mới dành cho trẻ em

Kiddle.Co là một công cụ tìm kiếm mới đã được thiết kế dành riêng cho trẻ em. Đây là một sản phẩm kết hợp...

Kaspersky Free – Phiên bản phần mềm diệt virus miễn phí của Kaspersky

Kaspersky là thương hiệu khá nổi tiếng trong lĩnh vực bảo mật với các phần mềm diệt virus. Trước kia Kaspersky chỉ cung cấp...