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

Lần đầu nhận quà từ Shopify

Hura Apps là 1 trong những đối tác của Shopify được vinh dự Shopify chọn tham gia chương trình (Huấn luyện Thương mại) Commerce...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

Giới thiệu một số công nghệ, dịch vụ mà Hura Apps đang dùng cho mô hình SaaS

Hura Apps là nhóm phát triển các ứng dụng web hỗ trợ cho nền tảng Shopify. Hura Apps hoạt động theo mô hình SaaS....

Hành trình kiếm 500 triệu/tháng từ việc xuất bản ứng dụng lên Shopify App Store

Đây là câu chuyện của một lập trình viên người Pháp có tên Axel Hardy được chính anh chia sẻ trên Twitter của mình....

BẠN XEM CHƯA

Instagram Stories – Tính năng mới của Instagram

Trong một email gửi đến người dùng của mình Instagram với nội dung giới thiệu về một tính năng mới của mình mang tên...

Dạo quanh Quy Nhơn ở năm 1994

Mạng Bình Định mời các bạn dạo quanh Quy Nhơn trong năm 1994 với clip do một người dân quay lại. [youtube https://www.youtube.com/watch?v=V7QRvyVUuZ8?rel=0&showinfo=0&w=480&h=360] Nguồn: FB/Quê tôi...

Tắt chế độ tự động nâng cấp lên Windows 10 vĩnh viễn chỉ với 1 click chuột

Windows 10 là phiên bản hệ điều hành mới nhất của Microsoft. Nó được cung cấp miễn phí và được tự động cập nhật...

Theo đuôi trang web với Webmon

Bạn muốn theo dõi thông tin trên một trang web nào đó nhưng việc mở trang web và cập nhật liên tục bằng phím...

Hướng dẫn viết ứng dụng Facebook

Vô tình tìm thấy video hướng dẫn viết ứng dụng Facebook do bạn Vũ Thanh Lai - admin diễn đàn SinhVienIt chia sẻ trên...