Làm sao để tạo sidebar tự động trượt theo màn hình

Bài viết này mình sẽ hướng dẫn cho bạn cách tạo sidebar tự động trượt khi kéo chuột xuống dưới hoặc lên trên màn hình. Công việc rất đơn giản chứ không khó như bạn vẫn thường nghĩ. Đầu tiên mình mời bạn ghé sang xem demo trực tiếp để có thể hình dung ra được bạn sắp làm công việc gì trong bài viết này./images/post/2014/07/15/20//floating-menu-files.jpg

Đôi khi trên blog của bạn có những widget hoặc một box nội dung nào đó mà bạn mong muốn nó luôn hiển thị trên màn hình cho dù người dùng kéo chuột tới vị trí nào đi nữa thì nội dung ấy vẫn nằm trước mắt bạn đọc. Áp dụng vào chức năng này bạn cũng có thể tạo các nút chia sẻ mạng xã hội chạy lên chạy xuống hoặc tạo quảng cáo trượt 2 bên phần content trên blog của bạn, áp dụng rất tốt đối với các trang cho phép đặt banner để kiếm tiền nhé.

Chuẩn bị mọi thứ cần thiết

Để có thể áp dụng được bài viết này, bạn cần phải tải các thư viện liên quan, bao gồm jQuery và jQuery Lockfixed. Sau khi đã tải 2 thứ viện đó về máy tính, bạn tiến hành tạo một trang web trống và đính kèm 2 thư viện đó vào bên trong thẻ head.

 

Nếu như bạn dùng code này vào mã nguồn WordPress thì khỏi cần tải jQuery nữa mà chỉ cần thêm hàm sau vào tập tin functions.php để load thư viện jquery.

 

Đoạn code trên sẽ giúp bạn tự động thêm thư viện jquery và lockfixed vào bên trong thẻ head thay vì bạn phải làm công việc trên bằng tay, chú ý là thay đổi lại đường dẫn của tập tin cho phù hợp với trang của bạn nhé.

Bây giờ sẽ là tập tin .html hoặc .php của bạn, mở tập tin bạn muốn hiển thị hoặc chỉnh sửa lên và thêm vào các dòng code sau:

 

Cuối cùng sẽ là phần định dạng cho trang của bạn, hãy mở tập tin .css lên và thêm vào các thuộc tính như mình giới thiệu bên dưới. Bạn có thể thay đổi hoặc thêm bớt theo ý thích của bạn.

 

Như vậy là bạn đã hoàn thành xong rồi đấy, bây giờ hãy chạy thử trang web để xem kết quả mà bạn đã làm được. Trong bài hướng dẫn này chỉ có phần khai báo tùy chỉnh vị trí xuất hiện của sidebar là hơi khó hiểu.

 

Dòng code này mình viết để lấy vị trí điểm dừng của widget nằm trên sidebar, khi kéo chạy xuống tại một vị trí nhất định nào đó thì box này sẽ dừng lại chứ không chạy theo xuống dưới nữa.

Kết luận

Qua bài viết này bạn đã có thể tự tạo được thanh nội dung trượt xuống dưới hoặc chạy lên trên tùy theo vị trí kéo chuột của thanh Scroll Bar trên trình duyệt web.

Bạn có thể áp dụng để tạo các banner quảng cáo, tạo thanh chia sẻ bài viết luôn hiển thị trên màn hình hoặc tạo một thanh menu với công dụng tương tự như vậy, việc này sẽ rất có ích cho blog hoặc trang web của bạn nếu như bạn muốn khách truy cập luôn nhìn thấy thông tin quan trọng mà bạn muốn gửi đến họ.

Related posts:

One Response to Làm sao để tạo sidebar tự động trượt theo màn hình

  1. du lịch cù lao chàm says:

    phải tham khảo thêm một số nơi khác nữa xem đánh giá như thế nào

Leave a Reply

Your email address will not be published. Required fields are marked *