<!doctype html> <html> <head> <meta charset="utf-8"> <title>div固定在浏览器顶部</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> .wrap { margin:0 auto; border:1px solid #ccc; width:1000px; height:500px; margin-top:200px; margin-bottom:1000px; position:relative; } .left { width:100px; height:200px; margin:5em; border:1px solid #ccc; z-index:999; position:absolute; } </style> </head> <body> <div class="wrap"> <div class="left"> 往下试看效果 </div> </div> <script> $(document).ready(function() { var scroh = $(".wrap .left").offset().top; $(window).scroll(function() { if (scroh < $(window).scrollTop()) { //获取div距离 var left = $(".wrap .left").offset().left; $(".wrap").css({ 'position': 'relative' }); $(".wrap .left").css({ 'position': "fixed", 'left': 'left' - $(".wrap .left").css('width'), 'top': '0', 'margin-top': '0' }); } else { $(".wrap .left").css({ 'position': "relative", 'margin': '5em' }); } }); }); </script> </body> </html>
