导航跟随滚动条置顶移动示例代码

复制代码 代码如下:

  #topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0}

  <script type="text/javascript">

  jQuery(document).ready(function() {

  var topmenu = jQuery("#topmenu");

  var topmenu_top = topmenu.offset().top;

  reset_topmenu_top(topmenu, topmenu_top);

  jQuery(window).scroll(function() {

  reset_topmenu_top(topmenu, topmenu_top);

  });

  });

  function reset_topmenu_top(topmenu, topmenu_top) {

  var document_scroll_top = jQuery(document).scrollTop();

  if (document_scroll_top > topmenu_top) {

  topmenu.css('top', document_scroll_top);

  }

  if (document_scroll_top <= topmenu_top) {

  topmenu.css('top', topmenu_top);

  }

  }

  </script>

  效果图如下:

导航跟随滚动条置顶移动示例代码