滚动时隐藏固定的 div 内容

Question

我得到了这个脚本：

<script>
window.addEventListener("scroll",function() { 
   if(window.scrollY > 200) {
      $('#menuFixo').slideUp(400).fadeIn(400);
   }
   else {
      $('#menuFixo').slideDown(400).fadeOut(400);
   }
}, false);
</script>    

如何在滚动时隐藏#menuFixo 内容？这个脚本几乎完成了，但是我遇到了一些问题，当我滚动几次时，效果会持续为每个滚动行为延迟运行。可能是针设置了超时以避免不必要的重复。当我在 200px 的页面上滚动时，我确切需要 #menuFixo 的内容开始隐藏，并在此之前停止隐藏。

同样问题的例子，尝试上下滚动几次，页面一直隐藏延迟：http://jsfiddle.net/LJVMH/

我会解释一下我的情况，我有一个名为#menuFixo 的菜单，当页面位于顶部时我想显示它，但是当用户滚动页面时意味着他正在寻找其他东西，所以我'将清理页面，删除我的菜单以改善用户体验，脚本的目标是拥有一个干净的页面（没有菜单），我的客户可以更快地找到他想要的东西。但是滚动后我想再次显示我的菜单（动画），现在它对他很有用。

Answer 1

你可以试试这个（我用animate()代替fadeIn()并在动画之前用.not(':animated')测试动画）：

<script>
        var isAnimated = false;

        $.fn.scrollEnd = function(callback, timeout) {          
          $(this).scroll(function(){
            var $this = $(this);
            if ($this.data('scrollTimeout')) {
              clearTimeout($this.data('scrollTimeout'));
            }
            $this.data('scrollTimeout', setTimeout(callback,timeout));
          });
        };

        $(window).scrollEnd(function (event) {    
            if ($("#menuFixo").is(":hidden") || isAnimated) {
                $("#menuFixo").stop(true, true).slideDown(400).animate(
                    { opacity: 1 },
                    { queue: false, duration: 400 }
                );
            }
        }, 200);

        $(window).scroll(function (event) {    
            if (!$("#menuFixo").is(":hidden") && $("#menuFixo").not(':animated') && $(this).scrollTop() > 200) {
                isAnimated = true;
                $("#menuFixo").slideUp(400);$("#menuFixo").animate(
                    { opacity: 0 },
                    { queue: false, duration: 400 }, function() {
                        // Animation complete.
                        isAnimated = false;
                    }
                );
            }
        });
</script>

编辑： jQuery extension that adds a scrollEnd event

编辑 2： 为了避免对动画产生副作用，您可以使用标志 (isAnimated) 来显示您的菜单，即使当前正在处理动画。并且您还可以将 true 值传递给 stop() 函数以移除排队动画并立即完成当前动画 (doc)。

这里是你更新的小提琴：http://jsfiddle.net/LJVMH/213/