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

Amazon ra mắt Amazon Honeycode – Công cụ hỗ trợ người dùng tạo ứng dụng di động và web

Mới đây Amazon vừa thông báo ra mắt dịch Amazon Honeycode. Đây là một dịch vụ hỗ trợ người dùng tạo ra các ứng...

Điều gì sẽ xảy ra với cơ thể khi bạn trúng đạn

Chúng ta chắc hẳn đã xem khá nhiều bộ phim hành động mà trong đó nhân vật chính bị trúng đạn vào vai, vào...

Dad, How Do I? – Kênh Youtube cho những ai không có bố

Vừa qua, một kênh YouTube mới của một người đàn ông dạy bài học, kỹ năng về cuộc sống đã lan truyền cực kỳ...

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

reCAPTCHA rất hữu ích trong số hoá dữ liệu

Sách được xem là những kho tàng tri thức của nhân loại, tuy nhiên việc lưu trữ sách là cả một vấn đề to...

BẠN XEM CHƯA

Hổng sao đâu, bình tĩnh sống!

Chương trình Vietnam's Got Talent đêm qua có một thí sinh vô cùng đặc biệt. Một người phụ nữ lớn tuổi, dự thi cùng...

Lời cầu hôn xuất hiện trên Google Maps

Một người nông dân 32 tuổi đã cầu hôn bạn gái bằng cách viết lớn dòng chữ "Em sẽ cưới anh chứ?" trên cánh...

Hướng dẫn tạo USB cài đặt Ubuntu từ Windows

Chán Windows nên quyết định cài Ubuntu để sử dụng. Tận dụng cái laptop cũng để sử dụng nhưng ngặt nổi con laptop này...

Copy cả công thức trong Excel

Khi xài bản tính Excel đa số người dùng đều bấm giữ chuột vào góc dưới bên phải của ô chứa công thức rồi...

Bài toán tính hiệu bình phương của tổng và tổng các bình phương

Tiếp tục thư giãn đầu óc với những bài toán lập trình nhỏ mà mình lấy từ Code Fights. Bài toán hôm nay của...