jquery - 在 Safari 上从左侧动画的粘性标题

Question

我使用的是粘性标题，一切正常，但是，在 Safari 中，当我滚动时，它会从左上角开始动画。它不会发生在 firefox 或 chrome 中。您是否知道您在代码中添加或更改了什么以使其消失并且只是向下滑动或淡入而不是从左侧突然进入动画？

// Sticky Header - Home
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('#header-home').addClass("sticky");
    }
    else{
        $('#header-home').removeClass("sticky");
    }
});

您可以在此处查看测试站点 [在 safari 中查看以查看问题..]:

http://www.sdchamber.org.php53-11.dfw1-1.websitetestlink.com

Answer 1

Being on Linux I can't test this, but I suspect your header being the problem. See, you're giving .header-home.sticky a width of 100% and a position:fixed , but it has no horizontal starting point, so it just animates it from the left. Adding:

.header-home.sticky {
  left: 0;
  right: 0;
} 

Would make a lot of sense to me.

这确实行不通。实际上现在正在工作，因为我们有 OS X，所以我决定为您测试一下。这确实有效!

.header.header-home {
   width: 100%;
}