Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
La Kiến Vinh Tạo menu hoặc các phần tử có thể trượt theo thanh trượt của trình duyệt khi menu chạm đến đỉnh của trình duyệt web với thuần JavaScript hoặc JQuery. Với việc trượt theo bề dọc hay ngang của web, ta có thể gắn thêm quảng cáo hoặc tối ưu các thành phần cần hiển thị.

Giới thiệu

Trong các tính năng của web, nhất là các vấn đề về nội dungthương mại, có những nội dung mà ta muốn luôn được hiển thị hoặc trượt dọc theo khung nhìn khi người sử dụng di chuyển trên web. Ta xét 2 hình sau đây là tính năng hiện outline (nội dung bài viết), vì lý do muốn cho người sử dụng luôn có sẵn outline để theo dõi, nên outline này phải trượt theo website để giúp người đọc luôn theo dõi được toàn cảnh của bài viết.

ss_1
Outline chưa chạm đỉnh trình duyệt

ss_2
Outline chạm đỉnh trình duyệt

Tiền đề bài viết

Bài viết này ra đời nhằm thực hiện 2 điều

  • Trong bối cảnh STDIO vừa tích hợp thêm outline cho bạn đọc dễ theo dõi bài viết, mang lại hiệu quả hơn khi có cái nhìn tổng quát.
  • Mong muốn chia sẻ các kỹ thuật của bản thân cho các web-developers.

Đối tượng hướng đến

Các web-developers đang tìm một giải pháp để có thể "thả trôi" một phần nội dung. Về tính thương mại, có thể áp dụng kỹ thuật này để có thể cho khung quảng cáo trôi theo, và tăng tỷ lệ người đọc nhìn thấy quảng cáo nhiều hơn để tối ưu hóa lợi nhuận. Bài viết này không dành cho các bạn hoàn toàn không biết về lập trình web. Yêu cầu tối thiểu phải biết và thành thạo với HTML, CSS, JavaScript.

Môi trường và các công cụ

Do đây là môi trường phát triển nên tôi sử dụng một số công cụ hỗ trợ để phát triển nhanh là JQuery nên yêu cầu bạn phải biết về JQuery, nếu không bạn có thể tự ánh xạ từ JQuery sang Native JavaScript (thuần JavaScript).

  • JQuery 2.1.1+ và CSS3+.

Hướng dẫn

Tạo khung và nội dung (HTML + CSS)

Thiết kế layout bằng hình vẽ

Ta cần 3 thành phần chính để có thể tạo nên tính năng này (pipe, anchor, content).

ss_3

CSS codes cho layout

Ta cần định nghĩa 3 class pipe, anchor và content và lưu ý là pipe sẽ chứa anchor và content.

.pipe{
	width:150px;
	height:1000px;
	margin-top:150px;
	padding:5px;
	float:left;
	background:#f0f0f0;
}

.pipe .anchor{
	width:150px;
	height:10px;
	float:left;
	background:#00aadd;
}

.pipe .content{
	width:150px;
	height:100px;
	float:left;
	top:0;
	background:#ffbb33;
}

HTML codes và CSS codes hoàn chỉnh

<html>
<head>
	<title>STDIO.VN</title>
	<style>
		*{font-family:"Segoe UI",Arial,Helvetica,sans-serif;text-align:center;color:#fff}
		
		.pipe{
			width:150px;
			height:1000px;
			margin-top:150px;
			padding:5px;
			float:left;
			background:#f0f0f0;
		}
		
		.pipe .anchor{
			width:150px;
			height:10px;
			float:left;
			background:#00aadd;
		}
		
		.pipe .content{
			width:150px;
			height:100px;
			float:left;
			top:0;
			background:#ffbb33;
		}
	</style>
</head>
<body>
	<div class="pipe">
		<div class="anchor"></div>
		<div class="content">
			NOI DUNG
		</div>
	</div>
</body>
</html>

Giải thích

pipe class: dùng để chứa đựng content, nó tạo ra một cái ống thẳng đứng, giúp cho content trượt dài trên nó.

content class: nội dung, có thể là outline như của Stdio, cũng có thể là hình hoặc quảng cáo.

anchor class: phần tử này không phải là phần tử chính, nhưng nó phải có, nó sẽ nằm sát phía trên đỉnh của content, nó tồn tại để lưu trữ tọa độ khởi tạo của content, vì trong quá trình trượt, content sẽ thay đổi tọa độ, và mất đi tọa độ đầu. Đây không phải là cách duy nhất, bạn có thể dùng input, type là hidden để lưu trữ tọa độ này, tuy nhiên, code sẽ rối. Ngoài ra có thể dùng HTML5 với Local Storage cũng có thể làm được điều này. Nhưng tôi vẫn thích cách này hơn, đơn giản là vì tôi nghĩ ra nó. Thuộc tính height nên sử dụng là 1px thay vì 10px, và background color nên để là trong suốt, vì nó không phải là content chính nên không cần render (tôi để thông số lớn là để các bạn dễ theo dõi).

JQuery xử lý di chuyển

Ý tưởng

Ý tưởng để thực hiện việc di chuyển này là ta sẽ chuyển thuộc tính position của content trở thành fixed khi mà tọa độ đỉnh trình duyệt chạm anchor (hay hiểu là tọa độ đỉnh của content), lúc này content sẽ phụ thuộc vào tọa độ top của nó (trường hợp này ta cho giá trị là 0 để "chạm đỉnh" trình duyệt). Ngược lại, khi đỉnh trình duyệt cao hơn tọa độ đỉnh của content, thì ta sẽ chuyển thuộc tính position của content trở về relative, lúc này tọa độ của content sẽ được cố định lại tại vị trí khởi đầu của nó.

Nếu ngay từ đầu ta cho content class có thuộc tính này thì dù đỉnh trình duyệt chưa chạm vào anchor (hay tọa độ ban đầu của content) thì content đã chạm đỉnh trình duyệt.

Hiện thực

Ta cần truy cập vào 2 phần tử là anchor và content, do đó, ta sẽ gán id cho 2 phần tử này (id_anchor và id_content). Vậy ta có codes sau.

<html>
<head>
	<title>STDIO.VN</title>
	<style>
		*{font-family:"Segoe UI",Arial,Helvetica,sans-serif;text-align:center;color:#fff}
		
		.pipe{
			width:150px;
			height:1000px;
			margin-top:150px;
			padding:5px;
			float:left;
			background:#f0f0f0;
		}
		
		.pipe .anchor{
			width:150px;
			height:10px;
			float:left;
			background:#00aadd;
		}
		
		.pipe .content{
			width:150px;
			height:100px;
			float:left;
			top:0;
			background:#ffbb33;
		}
	</style>
</head>
<body>
	<div class="pipe">
		<div class="anchor" id="id_anchor"></div>
		<div class="content" id="id_content">
			NOI DUNG
		</div>
	</div>
</body>
</html>

Hiện thực việc thay đổi thuộc tính position của content, ta load thư viện JQuery vào và thêm vào và đăng ký việc xử lý việc cuộn lên xuống trong sự kiện ready.

<html>
<head>
	<title>STDIO.VN</title>
	<style>
		*{font-family:"Segoe UI",Arial,Helvetica,sans-serif;text-align:center;color:#fff}
		
		.pipe{
			width:150px;
			height:1000px;
			margin-top:150px;
			padding:5px;
			float:left;
			background:#f0f0f0;
		}
		
		.pipe .anchor{
			width:150px;
			height:10px;
			float:left;
			background:#00aadd;
		}
		
		.pipe .content{
			width:150px;
			height:100px;
			float:left;
			top:0;
			background:#ffbb33;
		}
	</style>
	
	<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
	
	<script>
		$(document).ready(function(){
		
			$(window).scroll(function(){
				if($(window).scrollTop() - $("#id_anchor").position().top < 0){
					$('#id_content').css({'position':'relative'});
				}else{
					$('#id_content').css({'position':'fixed'});
				}
			});
		});
	</script>

</head>
<body>
	<div class="pipe">
		<div class="anchor" id="id_anchor"></div>
		<div class="content" id="id_content">
			NOI DUNG
		</div>
	</div>
</body>
</html>

Download demo hoàn chỉnh

DOWNLOAD PROJ_1.zip

THẢO LUẬN
ĐÓNG