วิธีทำ sticky-ads banners ง่ายๆ

เขียนโดย เมื่อ

sticky ads คืออะไร?

เพื่อนๆ น่าจะเคยเห็นโฆษณาที่มันเลื่อนตามได้ เวลาเราเลื่อน scroll bar ขึ้นๆลงๆ ซึ่งบางทีก็แอบรำคาญอยู่เหมือนกัน ฮ่าๆ ๆ แล้ววิธีการทำเจ้า sticky ads นี่ยากรึป่าว ไม่ยากเลยครับ ใช้ความรู้ css กับ javascript นิดหน่อย

มาดูโค้ดตัวอย่างกันครับ

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>ทดสอบ sticky ads</title>
		<style type="text/css">
		.sticky-ads{
			width:200px;
			height:200px;
			position:fixed;
			right:0;
			bottom:0;
			border:1px solid #ccc;
			text-align:center;
		}
		.closer{
			float:right;
			z-index:0;
			cursor:pointer;
		}
		</style>
	</head>
	<body style="height:1600px;margin:0px;padding:0px;">
		<div class="sticky-ads" id="sticky1">
			<span class="closer" onclick="document.getElementById('sticky1').style.display='none';">[x]ปิด</span>
			<br/><br/>พื้นที่<br/>โฆษณา
		</div>
	</body>
</html>

อันนี้จะแสดงโฆษณาที่มุมล่างขวาของหน้าเว็บของเรานะครับ ถ้าเพื่อนๆ ต้องการให้โฆษณาไปอยู่ที่ตำแหน่งอื่นก็ลองปรับ css

		.sticky-ads{
			width:200px; //กำหนดความกว้างของโฆษณาครับ
			height:200px; //กำหนดความสูงของโฆษณาครับ
			position:fixed;
			right:0; //ตรงนี้ถ้าต้องการให้อยู่ได้ซ้ายก็ให้เปลี่ยนเป็น left:0; ครับ
			bottom:0; //ถ้าต้องการให้อยู่ด้านบนก็เปลียนเป็น top:0; ครับ
			border:1px solid #ccc;
			text-align:center;
		}

แค่นี้เราก็ได้ sticky ads มาใช้แล้วครับ ^^