模仿淘宝吸顶条（定时器） 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.12.1.js"></script> 
<title>淘宝吸顶条</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
body{ height: 2000px;}
#img{height: 40px; background-color:green;}
.abc{ position: fixed; left: 0; right: 0; top: 0; }
</style>
<script type="text/javascript">
$(function(){
	var TIMER;
	$(window).scroll(function(){
		clearTimeout(TIMER);
		if ($(document).scrollTop() > 0) {
			TIMER = setTimeout(function(){
				$('#img').addClass('abc');
				console.log($(document).scrollTop());
			},100);
		} else {
			TIMER = setTimeout(function(){
				$('#img').removeClass('abc');
			},100);
		}
	})
})
</script>
</head>
<body>
<div style="height: 200px; background-color: #ffcccc">d </div>
<div id="img"><img src="img/topbar.png"></div>
</body>
</html>

 

posted @ 2017-06-30 17:41  小毛驴--  阅读(127)  评论(0)    收藏  举报