<!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>
