在Safari上從左側動畫的粘性頭部

我正在使用粘性頭部並且一切都很好，但是在Safari中，當我滾動時，它從左上角進行動畫處理。它不會發生在Firefox或Chrome ..任何想法你添加或更改的代碼，使其消失，只是滑落或淡入，而不是從左側動畫進來？在Safari上從左側動畫的粘性頭部

// 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

來源

2015-10-21 Aaron Blomberg

正在對Linux的我不能對此進行測試，但我懷疑你的頭作爲問題。看，你給.header-home.sticky一個width的100% 和position:fixed，但它沒有水平的起點，所以它只是從左側的動畫。加：
.header-home.sticky { 
    left: 0; 
    right: 0; 
} 
會對我很有意義。

這確實不起作用。實際上，現在在工作，並且自從我們有OS X之後，我決定爲您測試它。這確實有效！

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

來源

2015-10-21 22:39:32

黨，這確實有道理，但沒有解決問題... –

我編輯我的答案並測試它，工作！ –

@Stevyn非常感謝你！完美的工作！ –

在Safari中，我得到一堆錯誤在控制檯中。對於CSS語法錯誤，Chrome非常寬容。 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)

來源

2015-10-21 22:04:06 baconck

謝謝，那裏我們實際上只有兩個錯誤，其餘的確是有效的規則/例外，不幸的是不是什麼導致左邊的動畫。但我已經修復了這兩個，所以感謝那些頭:) –

在Safari上從左側動畫的粘性頭部

回答

相關問題