Hướng dẫn tạo sidebar tự động trượt

Cập nhật lần cuối vào

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.

Demo sidebar trượt tự động

Đô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 jQueryjQuery 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ọ.

Theo dõi
Thông báo của
guest

26 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Hào
Hào
8 năm trước

sao mình làm rồi mà vẫn không được vậy bạn
http://tintn.net

Canh
Canh
8 năm trước
Canh
Canh
8 năm trước

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

minh
minh
8 năm trước

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 ạ ?

Tin tức Anime Manga
7 năm trước

cảm ơn bác, em đã làm được cho trang http://cotvn.net/ của em

Tinhwrl
7 năm trước

Có plugin nào không bác nhỉ. E ko biết code 🙁

otaku news
6 năm trước

hay quá bác ơi, đã thử và làm được rồi trên web https://love2d.net/ rồi thank bác

Võ Thanh Điền
6 năm trước

Dùng plugin Q2W3 fixed widget cho tiện 🙂

Tuấn
Tuấn
6 năm trước

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!

Tuấn
Tuấn
6 năm trước

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à

Tuấn
Tuấn
6 năm trước

Thank bạn nha!

Tuấn
Tuấn
6 năm trước

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?

Tuấn
Tuấn
6 năm trước

Chưa hiểu lắm nhưng thank bạn nha!

Tuấn
Tuấn
6 năm trước

Thank bạn!

Tuấn
Tuấn
6 năm trước

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!

Đình Quang
5 năm trước

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