需要帮助使 jQuery Transit 过渡重复

Question

// IGNORE THIS CODE
$(document).ready(function(){       
  $("#sticky-header").hide();
});
// IGNORE THIS CODE

这是我的代码：http://jsfiddle.net/de74ezo5/14/

所以我在这里尝试实现的是让粉红色标题折叠并在滚动超过顶部红色标题后保持固定在页面顶部。我正在使用 Transit 和 jQuery 来创建转换 (http://ricostacruz.com/jquery.transit/)。我不知道更有效的方法；宽松不能满足我的需要。

由于某种原因，在滚动回顶部并再次越过红色标题后，过渡没有重复。

这是我需要帮助的：

1. 如何在滚动回顶部后重复转换，然后再次越过红色标题？
2. 如何调整过渡速度？

Answer 1

问题是您的sticky-header div 的css 在初始向下滚动时添加了transform: 规则。当您向上滚动时，即使您将其隐藏，此规则仍然存在（仅将 display:block 更改为 display:none）

页面加载：

<div id="sticky-header" style="display: none;"></div>

向下滚动：

<div id="sticky-header" style="display: block; **transform**: translate(0px, 60px);"></div>

向上滚动：您可以看到即使 display = none，transform 仍然存在

<div id="sticky-header" style="display: none; **transform**: translate(0px, 60px);"></div>

向下滚动：规则已触发，除非删除，否则不会重新触发。

<div id="sticky-header" style="display: block; **transform**: translate(0px, 60px);"></div>

在您的 else 中，您需要更改 css 并删除该转换规则以使其重新触发：

    $('#sticky-header').css({
        "display" : "none",
        "transform" : ""        
    });

另外，性能说明：

每当您的窗口滚动到 160 像素以下时，就会触发您的过渡。你可以在这里看到，当我不断向下滚动时，该事件被反复触发（当我将鼠标滚下页面时，你可以看到它运行了 6 次）

在那里添加一个检查，这样.transition 只会被触发一次：您可以使用 jQuery 数据执行此操作：

  $(document).data('scrolled', false);

完整代码：

        $(document).ready(function() {
            $("#sticky-header").hide();
            $(document).data('scrolled', false);
        });

        $(window).scroll(function(){
            if( $(document).scrollTop() > 160 ) { // do transition
                if (!$(document).data('scrolled')) {
                    $('#sticky-header').show();
                    $("#sticky-header").transition({ y: 60 });      
                    $(document).data('scrolled', true);
                }
            }
            else { //show original header
                $('#sticky-header').css({
                    "display" : "none",
                    "transform" : ""        
                });
                $(document).data('scrolled', false);
            }
        });

FIDDLE