当将类添加到body时，CSS Transition不触发（Firefox） [英] CSS Transition not firing when adding class to body (Firefox)
问题描述
我在网站上创建一个粘性标题，在页面开始滚动时减少2个元素的填充。为此，一旦滚动开始，我向body标签添加一个类，并在添加类后将转换设置为动画。这在webkit浏览器工作正常，但不是在firefox？这里是一个JSFiddle的问题。 http://jsfiddle.net/5HLyu/11/ 。任何帮助是感谢！
I am creating a sticky header on a site that decreases padding of 2 elements once the page starts scrolling. To do so, I add a class to the body tag once scrolling begins and have transitions set up to animate once that class is added. This works fine in webkit browsers but not in firefox? Here is a JSFiddle of the issue. http://jsfiddle.net/5HLyu/11/. Any help is appreciated!
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);
推荐答案
位置
更改此行：
code> .down .header-wrapper {position：fixed; top：0; width：100％; z-index：1000}
.down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000}
到此：
.header-wrapper {position：fixed; top：0; width：100％; z-index：1000}
（即删除 .down
我不相信这会对您的代码产生任何负面影响。
I don't believe this will have any negative effect on your code.
这篇关于当将类添加到body时，CSS Transition不触发（Firefox）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
