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

Dân Anh đốt cột phát sóng 5G vì nghi phát tán virus Corona

Ít nhất ba cột phát sóng 5G vừa bị đốt cháy vì có người tin rằng nó là nguồn phát tán virus corona. Theo BBC,...

Kiểm tra trình duyệt của khách có phải là Safari bằng PHP

Hôm rồi chợt nhận ra điều là Safari của Apple chưa hỗ trợ hiển thị ảnh WebP. Vậy là cái plugin Hura Apps Photos...

GitHub mua lại nền tảng npm

npm là đóng một phần quan trọng trong cộng đồng JavaScript. Cộng đồng npm trong 10 năm qua là sự đóng góp của hàng...

Youtube cho phép quảng cáo trên video có nội dung liên quan đến Covid-19

Trong một bài đăng trên blog, CEO Susan Wojcicki cho biết YouTube sẽ bắt đầu cho phép chạy quảng cáo trên các video thảo...

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ị...

BẠN XEM CHƯA

Mẹo chữa nám bằng lòng trắng trứng gà

Trứng gà không chỉ là một thực phẩm bổ dưỡng tốt cho sức khỏe mà còn là phương pháp tự nhiên giúp các chị...

Neighbours From Hell 1

Dung lượng: 123 MB Phiên bản portable (tải về giải nén và có thể chơi ngay mà không cần cài đặt) Các bạn tải miễn phí...

Thiếu nữ Bình Định xinh lung linh đón xuân

Bộ ảnh được thực hiện bởi nhiếp ảnh gia Minh Pham trong những ngày gần tết năm 2015. Ảnh: Flickr Wandow

Làm việc tốt

Giờ tan tầm, dòng người hối hả trên đường. Ai cũng muốn mau sớm về đến nhà sau một ngày làm việc. Mình cũng...

Chống chèn trang web vào trang web khác bằng iframe

Iframe là một thẻ HTML có tác dụng đưa chèn một trang web trong một trang web khác. Nhiều khi tính năng này bị...