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