I have been working on a website where I want to create a sticky header that reduces the padding of two elements once the user starts scrolling. To achieve this, I have added a class to the body tag when scrolling begins and set up transitions to animate these changes. While this works smoothly in webkit browsers, I am facing difficulties with Firefox. Here is a JSFiddle illustrating the problem: http://jsfiddle.net/5HLyu/11/. Any assistance would be greatly 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);