Javascript粘性菜单

时间:2017-06-28 18:31:24

标签: javascript jquery

我的Sticky菜单有问题。我正努力让它发挥作用。向下滚动页面后,我希望粘性菜单转到主要固定菜单

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);

  function stickIt() {
  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;

  if ($(window).scrollTop() >= (orgElementTop)) {
   orgElement = $('.original');
   coordsOrgElement = orgElement.offset();
   leftOrgElement = coordsOrgElement.left;  
   widthOrgElement = orgElement.css('width');

   $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
   $('.original').css('visibility','hidden');
  } else {
   $('.cloned').hide();
   $('.original').css('visibility','visible');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="logo">Main Fixed Menu</div>
  <div class="intro">Some content</div>
  <div class="menu">Sticky-menu</div>
</header>

0 个答案:

没有答案