將類添加到正文（Firefox）時，CSS轉換未觸發

我在網站上創建了一個粘滯標題，該頁面在頁面開始滾動時減少2個元素的填充。爲此，我在滾動開始時向body標籤添加一個類，並在添加該類時將轉換設置爲動畫。這在webkit瀏覽器中工作正常，但不是在Firefox中？這是一個JSFiddle的問題。 http://jsfiddle.net/5HLyu/11/。任何幫助表示讚賞！將類添加到正文（Firefox）時，CSS轉換未觸發

HTML

<body> 
<div class="header-wrapper"> 
    <div class="header"> 
     Header 
    </div> 
    <div class="menu"> 
     Menu 
    </div> 
</div> 
</body>

CSS

body{height:1000px; overflow:scroll; padding:0; margin:0} 
.header{background:#00457c; color:#fff; padding:22px 0; text-align:center; 
    -webkit-transition:all 250ms ease-out; 
    -moz-transition:all 250ms ease-out; 
    -ms-transition:all 250ms ease-out; 
    -o-transition:all 250ms ease-out; 
    transition:all 250ms ease-out; 
} 
.menu{background:#aaa; padding:22px 0; text-align:center; 
    -webkit-transition:all 250ms ease-out; 
    -moz-transition:all 250ms ease-out; 
    -ms-transition:all 250ms ease-out; 
    -o-transition:all 250ms ease-out; 
    transition:all 250ms ease-out; 
} 

.down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000} 
.down .header{padding:10px 0} 
.down .menu{padding:10px 0}

jQuery的

(function($){ 
    $(window).on("scroll", function() { 
     var fromTop = $(window).scrollTop(); 
     $("body").toggleClass("down", (fromTop > 1)); 
    }); 
})(jQuery);

來源

2014-06-23 mannr

我無法複製在Firefox這個問題，或任何其它布勞爾我知道的，你運行的是最新的版本？ –

是的。在OSX 10.9.3 – mannr

上運行版本30.0您可以試試這個：http://stackoverflow.com/questions/15499422/css-transition-only-working-in-firefox?rq=1 –

FF似乎有問題，與過渡，如果你改變一個元素position

改變這一行：

.down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000}

要這樣：

.header-wrapper{position:fixed; top:0; width:100%; z-index:1000}

（即。刪除.down選擇器）

我不相信這會對您的代碼有任何負面影響。

DEMO

來源

2014-06-23 18:55:44 Turnip

工作！我唯一需要做的就是調整網站上下一個元素的邊距，以便它將報頭置於文檔流之外。謝謝！ – mannr

很酷。你可能也可以在你的'body'中添加一些填充 – Turnip

將類添加到正文（Firefox）時，CSS轉換未觸發

回答

相關問題