jquery - 淡出菜单并使用返回顶部按钮进行切换

Question

我正在寻找一些基本 javascript 的帮助。我有一个固定菜单，当我向下滚动时会淡出。在这一点上，我想淡入一个返回顶部按钮，但我唯一的问题是我不能让返回顶部按钮像菜单那样淡入和淡出。它一直在闪烁。

我试过使用 .stop() 我不确定这是否是正确的方法。

这是我的 codepen 的链接——http: //codepen.io/veryrobert/pen/xbEaH

HTML

<div>
  <button id="top">Back to top</button>
  <ul id="nav" >
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
  </ul>
</div>

jQuery

$(window).scroll( function(){

  var scrollTop = $(window).scrollTop()>10;
  var top = $('#top');
  var nav = $('#nav');

  if(scrollTop != 0) {

  nav.fadeOut();  
  top.fadeIn();
  }

  else {
// I was missing my {} 
nav.fadeIn();  
top.fadeOut();
}   
});

如果这很简单，我很抱歉，但我无法理解它。

提前致谢

Answer 1

从button显示无开始。

#top { position:fixed; top:50px; display: none;}

http://jsfiddle.net/fkdLE/

也不要忘记{}on your else 声明。

$(window).scroll( function(){
  var scrollTop = $(window).scrollTop();
  var top = $('#top');
  var nav = $('#nav');
  if(scrollTop != 0) {
     nav.fadeOut();  
     top.fadeIn();
  }
  else{
     nav.fadeIn();  
     top.fadeOut();
  }
});