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.
Đô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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title>Tạo sidebar tự động chạy theo trang khi kéo chuột</title> <link href="http://gmpg.org/xfn/11" rel="profile"> <link href="http://sauhi.com/demo/wp-source/xmlrpc.php" rel="pingback"> <link rel="Shortcut Icon" href="http://sauhi.com/demo/wp-source/wp-content/themes/wp-demos/images/favicon.ico" type="image/x-icon"> <link media="all" type="text/css" href="http://sauhi.com/demo/wp-source/wp-content/themes/wp-demos/style.css?ver=1.0" id="wp-demo-css" rel="stylesheet"> <link media="all" type="text/css" href="http://sauhi.com/demo/fixed-sidebar-while-scrolling/custom/style.css?ver=1.0" id="3D-button-demo-css" rel="stylesheet"> <script src="/images/post/2014/07/15/20//jquery.js?ver=1.10.2" type="text/javascript"></script> <script src="http://sauhi.com/demo/wp-source/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1" type="text/javascript"></script> <script src="http://sauhi.com/demo/fixed-sidebar-while-scrolling/custom/jquery.lockfixed.min.js?ver=3.8.1" type="text/javascript"></script> <link href="http://sauhi.com/demo/wp-source/xmlrpc.php?rsd" title="RSD" type="application/rsd+xml" rel="EditURI"> <link href="http://sauhi.com/demo/wp-source/wp-includes/wlwmanifest.xml" type="application/wlwmanifest+xml" rel="wlwmanifest"> <meta content="WordPress 3.8.1" name="generator"> </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.
|
1 2 3 4 5 6 7 8 9 |
<?php function sw_custom_scripts() { wp_enqueue_script('jquery'); wp_register_script('lockfixed', SW_DEMO_CUSTOM_URI.'/jquery.lockfixed.min.js'); wp_enqueue_script('lockfixed'); } add_action('wp_enqueue_scripts', 'sw_custom_scripts'); ?> |
Đ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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div id="container" class="demo-container"> <div class="wrap"> <header> <h1>Tiêu đề của trang</h1> </header> <main> <p>Nội dung của trang</p> <p>Hello World!</p> <p>mình ở đây để giúp đỡ những bạn cần mình.</p> </main> <aside id="sidebar"> <div class="widget sticker"> <p>Nội dung tự động trượt</p> </div> <div id="stopfixed" class="widget"> <p>Nội dung thường</p> </div> </aside> <footer> <p>Footer của trang</p> </footer> </div> </div> <script> (function($) { var bottom_value = $('#stopfixed').offset().top - $('#stopfixed').height() - parseInt($('#sidebar').css('padding-bottom')) - parseInt($('.widget').css('margin-bottom')); $.lockfixed("#sidebar .sticker",{offset: {top: 10, bottom: bottom_value}}); })(jQuery); </script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
#container { height: 1000px; } header { background: none repeat scroll 0 0 #DDDDDD; height: 60px; margin-top: 20px; padding: 5px 20px; } header h1 { line-height: 17px; margin: 17px 0 0; } main { background: none repeat scroll 0 0 #DDDDDD; float: left; height: 785px; margin-top: 5px; padding: 20px; width: 600px; } aside { background: none repeat scroll 0 0 #DDDDDD; height: 785px; margin-left: 650px; margin-top: 5px; padding: 20px; position: relative; } #container footer { background: none repeat scroll 0 0 #DDDDDD; height: 50px; margin-top: 10px; padding: 10px 20px; } .widget { background: none repeat scroll 0 0 #FBFBFB; display: block; height: 200px; margin-bottom: 10px; padding: 10px; width: 270px !important; } .sticker { } .widget:last-child { bottom: 10px; position: absolute; } main p { margin-bottom: 10px; } |
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.
|
1 |
var bottom_value = $('#stopfixed').offset().top - $('#stopfixed').height() - parseInt($('#sidebar').css('padding-bottom')) - parseInt($('.widget').css('margin-bottom')); |
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ọ.
phải tham khảo thêm một số nơi khác nữa xem đánh giá như thế nào