Javascript 第'页；跳跃'；当菜单使用fadein/out-jquery从相对变为固定时

我正在浪费大量的时间尝试创建一个滚动事件，以便在滚动到达页面时将标题/导航分离并固定在页面顶部

带有fadeOut（）的菜单将显示“display:none”，我的页面将上升到导航的高度。 我怎样才能获得平稳的运动

$(window).scroll(function(){     
  if($(this).scrollTop() > pos.top+menu.offset().top-menu.height() && menu.hasClass('menudefault')){        
    menu.fadeOut('500', function(){             
    $(this).addClass('menufixed').removeClass('menudefault').fadeIn('500');
  });
}

这是我的密码笔：

你的500周围不应该有“”。事实上你已经有两次了。一旦进入淡出效果和淡出效果。500不是一个字符串，而是一个值。你需要一个值

$(window).scroll(function(){     
  if($(this).scrollTop() > pos.top+menu.offset().top-menu.height() && menu.hasClass('menudefault')){        
   menu.fadeOut(500, function(){             
    $(this).addClass('menufixed').removeClass('menudefault').fadeIn(500);
  });
}

---

这是一种完全不同的方法。通过这种方法，我们克隆了原始菜单，并将克隆添加到它的正前方，以便始终有一个元素占据空间，从而防止页面跳转

• JSBin：
• JSFiddle：

---

JavaScript：

(function($) {
  $(document).ready(function() {
    var 
    $menu = $('#menu'),
    $clone = $menu.clone(true),
    $window = $(window),
    top = $menu.offset().top,
    topDown = top + $menu.height(),
    currentScroll = 0;

    $clone.addClass('fixed');
    $menu.before($clone);

    $window.scroll(function() {
      currentScroll = $window.scrollTop();

      if(currentScroll > topDown) {
        $menu.addClass('invisible');
        $clone.addClass('visible');
      } 

      if(currentScroll < top) {
        $menu.removeClass('invisible');
        $clone.removeClass('visible');
      }
    });
  });
})(jQuery);

HTML：

<div id="menu">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Careers</li>
    <li>More</li>
  </ul>
</div>

家
关于
接触
事业
更多

需要对菜单进行克隆，以保持布局不变。然后对克隆进行操作

演示

var menuClone=$（）；
if（$（this.scrollTop（）>pos.top+menu.offset（）.top-menu.height（）&&menuClone.length==0）{
//                                                                  ^^^^^^^^^^^^^^^^^^^
menuClone=menu.clone（）.appendTo（'body'）.removeClass（'menudefault'）.addClass（'menufixed'）.hide（）.fadeIn（'400'）；
//  ^^^^^^^^^^^^^^^^^^^^^^^^^
}如果（$（this.scrollTop（）0）{
//                                          ^^^^^^^^^^^^^^^^^^^
menuClone.fadeOut（'100'，function（）{
menuClone.remove（）；
美诺克隆=$（）；
});
}

编辑

---

我建议去掉

menuClone.fadeOut（）

，只需删除克隆

menuClone.remove（）；美诺克隆=$（）
这看起来很完美！我等不及要用它了！正确的！我试图克隆它，但方式不好。这就是我要找的。我只是删除了引号以获得正确的淡入度值，如
fadeIn（400）
。现在它是完美的！在顶部添加图像时，我也遇到了一些问题。解决方法如下：
body {margin:0; padding: 1em;}
#menu {
  background: #e55;
}
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu li {
  display: inline-block;
  padding: 12px;
}
.fixed {
  position: fixed;
  top: 0;
  left: 1em;
  right: 1em;
  z-index: 99;
  opacity: 0;
}
.visible {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in;
  -moz-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in;
}
.invisible {
  visibility: hidden;
}

<div id="menu">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Careers</li>
    <li>More</li>
  </ul>
</div>

var menuClone = $();
if($(this).scrollTop() > pos.top+menu.offset().top-menu.height() && menuClone.length==0){
//                                                                  ^^^^^^^^^^^^^^^^^^^
    menuClone = menu.clone().appendTo('body').removeClass('menudefault').addClass('menufixed').hide().fadeIn('400');
//  ^^^^^^^^^^^^^^^^^^^^^^^^^
} else if($(this).scrollTop() <= pos.top && menuClone.length>0){ 
//                                          ^^^^^^^^^^^^^^^^^^^
    menuClone.fadeOut('100', function(){             
        menuClone.remove();
        menuClone = $();
    });
}