javascript - 需要帮助使jQuery Transit过渡重复

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

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

因此，我要在此处实现的目的是使粉色标题折叠并滚动到顶部红色标题后，将其固定在页面顶部。我将Transit与jQuery一起使用来创建过渡（http://ricostacruz.com/jquery.transit/）。我不知道更有效的方法。放松不能满足我的需求。

出于某种原因，过渡到顶部，然后再次经过红色标题后，不再重复。

这是我需要的帮助：


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

最佳答案

问题是您的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，您仍然可以看到转换仍然存在

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

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

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

在其他情况下，您需要更改css并删除该转换规则，以便重新触发：

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

另外，附带性能说明：

每次窗口滚动到160px以下时，都会触发过渡。当我不断滚动时，您可以在这里看到，该事件被重复触发（当我将鼠标向下滚动页面时，可以看到它运行了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