粘性 header 在 Safari 上从左侧动画

Question

我使用的是粘性 header，一切都很好，但是，在 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

在 Safari 中，我在控制台中收到一堆错误。 Chrome 对 CSS 语法错误非常宽容。 Safari 没那么多。看一看，您可能会发现您的问题。

[Warning] Invalid CSS property declaration at: * (helpers.css, line 401)
[Warning] Invalid CSS property declaration at: * (helpers.css, line 401)
[Warning] Unexpected CSS token: : (bootstrap.css, line 3497)
[Warning] Unexpected CSS token: : (bootstrap.css, line 6166)
[Warning] Unexpected CSS token: : (bootstrap.css, line 6176)
[Warning] Invalid CSS property declaration at: ; (style.css, line 764)
[Warning] Invalid CSS property declaration at: * (style.css, line 2512)
[Warning] Invalid CSS property declaration at: * (style.css, line 2546)
[Warning] Invalid CSS property declaration at: * (style.css, line 2658)
[Warning] Unexpected CSS token: !important (style.css, line 2815)
[Warning] Invalid CSS property declaration at: * (owl.carousel.css, line 91)
[Warning] Invalid CSS property declaration at: * (owl.carousel.css, line 115)
[Warning] Invalid CSS property declaration at: ; (style.css, line 764)
[Warning] Invalid CSS property declaration at: * (style.css, line 2512)
[Warning] Invalid CSS property declaration at: * (style.css, line 2546)
[Warning] Invalid CSS property declaration at: * (style.css, line 2658)
[Warning] Unexpected CSS token: !important (style.css, line 2815)

Answer 2

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%;
}

粘性 header 在 Safari 上从左侧动画

Sticky header animating in from the left on Safari

html

css

safari

jquery

header