<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>test</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script> <style type="text/css"> *{ margin:0; padding:0;} .ndiv{ width:200px; height:400px; border:1px solid #ccc;background: #f1f1f1;} .fix-div{ position:fixed; top:0px;} </style> </head> <body> <section style="height: 700px;"></section> <div id="mydiv" class="ndiv" >di222v</div> <section style="height: 700px;"></section> <script type="text/javascript"> $.fn.fixedDiv = function(actCls){ var pos = 0, that = $(this), topVal; if(that.length > 0){ topVal = that.offset().top; } function fix(){ pos = $(document).scrollTop(); if (pos > topVal) { that.addClass(actCls); if (!window.XMLHttpRequest) { that.css({ position: 'absolute', top : pos }); } } else { that.removeClass(actCls); if (!window.XMLHttpRequest) { that.css({ position: 'static', top : 'auto' }); } } } fix(); $(window).scroll(fix); } $('#mydiv').fixedDiv('fix-div'); </script> </body> </html>
运行代码
