Question

我在网站上创建一个粘性标题，一旦页面开始滚动，就会减少2个元素的填充。为此，我在滚动开始后向body标签添加一个类，并在添加该类后将过渡设置为动画。这在webkit浏览器中工作正常但在firefox中不行？这是一个问题的JSFiddle。 http://jsfiddle.net/5HLyu/11/。任何帮助表示赞赏！

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

Answer 1

如果更改元素position

，则FF似乎存在转换问题

更改此行：

.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

向类添加类时，CSS转换未触发（Firefox）

1 个答案: