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

- Advertisement -
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

BÀI VIẾT MỚI

Hướng dẫn khai báo thuế TNCN trực tuyến cho cá nhân mảng kinh doanh nội dung số

Mình là 1 freelancer kiểu kiếm tiền trực tuyến mà được ngành thuế đưa vào mảng cá nhân kinh doanh nội dung số. Nếu...

Bột ngọt Vị Hương Tố – Thương hiệu bột ngọt nổi tiếng trước 75 và ly kỳ chuyện “châu chấu đá xe”

Hai nhãn hiệu Ajinomoto và Vedan có mặt tại Việt Nam vào thập niên 1950, đã chiếm lĩnh toàn bộ thị trường trong nước....

Pixel 6, chiếc điện thoại sắp ra mắt của Google

Nổi tiếng với danh hiệu "cha đẻ của hệ điều hành Android", nhưng ít ai biết Google cũng sở hữu cho mình một dòng...

Chụp ảnh nguyên trang web với công cụ trực tuyến Site-Shot

Ngày nay có rất nhiều công cụ giúp bạn chụp ảnh màn hình và trong số đó cũng có nhiều công cụ hỗ trợ...

Cách tạo thanh thông báo trượt trên đầu trang web Shopify

Thông báo trên đầu trang (announcement bar) là vị trí cũng như giải pháp tốt nhất để truyền tải thông điệp đến khách truy...

BẠN XEM CHƯA

Dr.Fone – Công cụ phục hồi dữ liệu trên iPhone, iPad, iPod

Wondershare Dr.Fone (Dr.Fone) là một công cụ phục hồi dữ liệu mạnh mẽ, có thể giúp bạn quét và khôi phục dữ liệu bị...

Tại sao các cầu thủ khi ra sân thường dắt theo trẻ em?

Các đứa trẻ ấy được gọi là MASCOT (tạm dịch: linh vật, sứ giả). Nhưng mãi đến năm 2000, truyền thống dẫn trẻ em...

Tuyết rơi trên màn hình với DesktopSnowOk

Vậy là chỉ còn khoảng một tuần lễ nữa là đến lễ giáng sinh. Bạn muốn làm một cái gì đó để mang không...

Copy văn bản ở những nơi không cho phép dễ dàng với Textify

Phím tắt Ctrl+C dùng để thực hiện lệnh sao chép (ở đây mình muốn đề cập đến sap chép văn bản). Tuy nhiên ở...

Khoản tiền kiếm được đầu tiên từ việc làm freelance

Kể ra thì cũng có thâm niên trong việc mần ăn ở trên mạng internet nhưng đây là lần đầu tiên mần ăn bằng...