How to show a div with scrollTop after certain pixels?

Question

I have a div (Fixed) that appears when the page is scrolled down and reappears when the page is scrolled up. I need it to just disappear (when rolling down) from the body’s 45px. That is, while the user only rolls 44.9px it does not disappear and, from that, yes.

Here my example:

var position = $(window).scrollTop(); 

// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) {
        console.log('scrollDown');
        $('.a').addClass('mostra');
    } else {
         console.log('scrollUp');
         $('.a').removeClass('mostra');
    }
    position = scroll;
});

body {
    height: 2000px;  
    background: orange;
}
.a {
    height: 50px;
    width: 50px;
    background-color: green;
    position: fixed;
    top: 0;
    transition: 0.5s;
}
.mostra {
  top: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="a"></div>

Answer 1

You can do what you want with css only, but it won’t work in very old browsers (but nobody cares, the important thing is to run on Chrome).

Here’s a tip in case someone needs it:

body {
    height: 2000px;  
    background: orange;
}
.a {
    height: 50px;
    width: 50px;
    background-color: green;
    /*Position Sticky é quem faz a mágica*/
    position: sticky;
    top: 0;
    transition: 0.5s;
}
.mostra {
  top: -50px;
}

<div class="a"></div>

Here is the list of compatible and incompatible browsers: https://caniuse.com/#feat=css-Sticky

https://www.w3schools.com/howto/howto_css_sticky_element.asp

Answer 2

Based on your code, I did so and it worked:

var position = $(window).scrollTop();

// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) {
        console.log('scrollDown');
        if(position > 45) {
            $('.a').addClass('mostra');
        }
    } else {
         console.log('scrollUp');
         $('.a').removeClass('mostra');
    }
    position = scroll;
});

body {
    height: 2000px;  
    background: orange;
}
.a {
    height: 50px;
    width: 50px;
    background-color: green;
    position: fixed;
    top: 0;
    transition: 0.5s;
}
.mostra {
  top: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="a"></div>