代码由三部分构成，分别是CSS+DIV+JS，兼容IE6浏览器，其他的应该都没问题，我暂时没测，目测很好用。推荐！『演示见下方』
 

CSS:

  1. .demo {
  2.     height: 1500px;
  3. }
  4. .float {
  5.     background-color: #FFFEE0;
  6.     border: 1px solid #FFECB0;
  7.     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  8.     padding: 10px;
  9.     position: absolute;
  10. 	left:0;
  11.     top: 80px;
  12.     width: 100%;
  13. }

HTML:

  1. <div class="demo">
  2. </div>       
  3. <div class="float" id="float">
  4.     我是个腼腆羞涩的浮动层...
  5. </div>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  2. <script>
  3. $.fn.smartFloat = function() {
  4.     var position = function(element) {
  5.         var top = element.position().top, pos = element.css("position");
  6.         $(window).scroll(function() {
  7.             var scrolls = $(this).scrollTop();
  8.             if (scrolls > top) {
  9.                 if (window.XMLHttpRequest) {
  10.                     element.css({
  11.                         position: "fixed",
  12.                         top: 0
  13.                     });    
  14.                 } else {
  15.                     element.css({
  16.                         top: scrolls
  17.                     });    
  18.                 }
  19.             }else {
  20.                 element.css({
  21.                     position: "absolute",
  22.                     top: top
  23.                 });    
  24.             }
  25.         });
  26.     };
  27.     return $(this).each(function() {
  28.         position($(this));                         
  29.     });
  30. };
  31.  
  32. //绑定
  33. $("#float").smartFloat();
  34. </script>

在线演示

float_demo0619.rar

Tags：导航, 定位, float, 浮层