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/）。我不知道一种更有效的方式;宽松不能满足我的需求。

由于某种原因，转换后不会重复滚动到顶部，然后再次经过红色标题。

这是我需要帮助的地方：

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

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

，您仍可以看到转换仍然存在

<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次，因为我的鼠标在页面上滚动）

enter image description here

在那里添加一个检查，以便.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

需要帮助使jQuery Transit转换重复

1 个答案: