Question

我正在使用一个粘性标题，一切都很好，但是，在我滚动时，它会从左上角动画。它不会在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中，我在控制台中收到一堆错误。在CSS语法错误方面，Chrome非常宽容。 Safari不是那么多。看看，你可能会对你的问题很好。

＆＃13;

[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)

＆＃13;

Answer 2

在Linux上我无法对此进行测试，但我怀疑你的标题是问题。请参阅，.header-home.sticky width 100% position:fixed 和.header-home.sticky { left: 0; right: 0; }，但它没有水平起点，所以它只是从左边动画它。添加：
.header.header-home {
   width: 100%;
}
对我来说很有意义。

这确实不起作用。实际上现在正在工作，因为我们有OS X，所以我决定为你测试它。这确实有效！

Webclient

在Safari

2 个答案: