问题描述:

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

网友答案:

FF seems to have issues with transitions if you change an elements position

Change this line:

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

To this:

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

(ie. remove the .down selector)

I don't believe this will have any negative effect on your code.

DEMO

相关阅读:
Top