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://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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

Binance Launchpad có dễ… húp như bạn tưởng

Tiền kỹ thuật số (cryptocurrency) đang dần mở rộng. Kể ra mình biết khái niệm này từ rất lâu. Nếu các bạn là độc...

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

BẠN XEM CHƯA

Kiểm tra khả năng bị lây nhiễm Covid-19 của bạn bằng trí tuệ nhân tạo

Trong bối cảnh Covid-19 đang lan rộng và khả năng lây nhiễm rất cao khi ta vô tình tiếp xúc với các người bị...

2 cách chuyển file PDF sang Excel không bị lỗi font

Trong thực tế công việc sẽ phát sinh nhiều loại tập tin PDF có chứa dữ liệu bản tính Excel. Người dùng sẽ cần...

Tắt tính năng tự động phát video trên Facebook

Sáng nay online trên Facebook thì thấy tự nhiên cứ mỗi lần tới video là nó tự động phát (autoplay). Điều này tạo cảm...

Một số thông tin cần biết về các loại CPU trên laptop

Một số số dòng CPU trên laptop:  CPU Celeron: CPU yếu, xuất hiện trong các máy tính giả rẻ, tablet hay mini laptop chỉ...

Facebook cấm không cho đặt tên WordPress plugin có chứa từ ngữ liên quan đến thương hiệu của mình

Mới đây mình có nhận được một email từ WordPress thông báo rằng 1 plugin của mình đã bị gỡ khỏi hệ thống của...