JQuery Scroll doesn't work in firefox

Question

I am trying to create a scrolling action, in which i want to toggle the .clone class with it's transitions. It is working properly in Chrome, yet it is not working on Firefox. Can someone help me?

CSS:

header {
   display: none;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 60px;
   padding: 20px;
   box-sizing: border-box;
   font-size: 20px;
   color: white;
}

header.clone {
   display: block;
   position: fixed;
   top: -65px;
   left: 0;
   right: 0;
   z-index: 999;
   transition: 0.2s top cubic-bezier(.3, .73, .3, .74);
   -webkit-transition: 0.2s top cubic-bezier(.3, .73, .3, .74);
   -moz-transition: 0.2s top cubic-bezier(.3, .73, .3, .74);
   -o-transition: 0.2s top cubic-bezier(.3, .73, .3, .74);
   -ms-transition: 0.2s top cubic-bezier(.3, .73, .3, .74);
   background: #3E3E3E;
 }

JQuery:

$(document).ready(function() {
    var $header = $("header");
    $clone  = $header.before($header.clone().addClass("clone"));

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

Answer 1

Change your code like this to better support cross browser scrolling. Use window instead of ¨body¨ ...

$(document).on("scroll", function() {
    var fromTop = $(window).scrollTop();
    // Rest of code

});