Bài viết này Sáu 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 Sáu 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.
<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="http://sauhi.com/demo/wp-source/wp-includes/js/jquery/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.
<?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:
<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>Sáu ở đâ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ư Sáu 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.
#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.
var bottom_value = $('#stopfixed').offset().top - $('#stopfixed').height() - parseInt($('#sidebar').css('padding-bottom')) - parseInt($('.widget').css('margin-bottom'));
Dòng code này Sáu 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ọ.
sao mình làm rồi mà vẫn không được vậy bạn
http://tintn.net
Mình mới vào xem trang của bạn, thấy nó chạy được rồi mà?
@Canh: Sao lại không được bạn? Chắc bạn làm sai chỗ nào đó, bạn thử lại một lần nữa xem sao nhé, nhớ là làm kỹ kỹ xíu.
Ok rồi bạn.. lúc nãy mình để nhầm cái Jquery… Cảm ơn bạn nhieu bài viết rất hữu ích. Ak bạn có biết làm cái khung Comment bằng JS k bạn
@Canh: Không có chi, giúp được bạn là ok rồi.
anh ơi cho em hỏi em dùng wpres mà muốn dùng chạy trên đầu wedsite thì copy đoạn code bỏ vào nơi đâu ạ ?
Bạn có thể dùng thuộc tính position fixed của css, đối với position fixed thì bạn chèn bất kỳ chỗ nào nó cũng hiểu.
Nếu bạn muốn dùng position absolute thì cũng được, nhưng phải phụ thuộc vào thẻ HTML cha có position relative.
cảm ơn bác, em đã làm được cho trang http://cotvn.net/ của em
Có plugin nào không bác nhỉ. E ko biết code 🙁
Bạn thử dùng plugin này xem: https://wordpress.org/support/plugin/q2w3-fixed-widget
hay quá bác ơi, đã thử và làm được rồi trên web https://love2d.net/ rồi thank bác
Dùng plugin Q2W3 fixed widget cho tiện 🙂
Bạn cho hỏi là mở tập tin nào, nằm ở đâu để thêm đoạn cod vào vậy? Mình chưa biết gì về lập trình, cảm ơn!
Chèn code js trước kết thúc đóng thẻ body nha bạn. Đối với WordPress thì bạn mở tập tin footer.php lên và thêm code vào trong đó.
Mà tập tin footer nằm trong thư mục nào của app vậy bạn? trong đó có nhiều thư mục có tập tin footer.php mà
Mình đang nói đến giao diện WordPress, bạn mở thư mục giao diện hiện tại lên và chỉnh sửa tập tin footer.php của giao diện. Nếu dùng nâng cao hơn thì bạn phải dùng các hàm wp_enqueue_style và wp_enqueue_script để load css và javascript lên trang web. Nếu bạn đang dùng source code khác thì có thể hỏi thêm tư vấn của cộng đồng.
Thank bạn nha!
Mình dùng WordPress. Vậy còn tập tin *.css cần mở là tập tin nào vậy bạn?
Bạn mở tập tin functions.php của giao diện hiện tại lênh, dùng hàm wp_enqueue_style để load css và hàm wp_enqueue_script để load javascript: https://hocwp.net/blog/chen-css-va-javascript-trong-wordpress/
Chưa hiểu lắm nhưng thank bạn nha!
Tốt nhất bạn nên xem hướng dẫn trên này nhé: https://github.com/garand/sticky
Thank bạn!
Hỏi thêm bạn chút, bạn có thể chỉ cho mình link down Content view Pro free ở đâu ko vậy? Cảm ơn bạn!
Cảm ơn admin đã chia sẻ, không biết cái này có thể phát triển thành plugin không admin? Mình không chuyên về code nên khó khăn quá.
Bạn có thể sử dụng plugin Q2W3 Fixed Widget nhé.