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）显示菜单。您还可以将真值传递给stop()函数以删除排队的动画并立即完成当前动画（doc）。

此处您更新了小提琴：http://jsfiddle.net/LJVMH/213/

滚动时隐藏固定的div内容

1 个答案: