How to make elements appear and disappear when scrolling jquery?

Question

css

jQuery(function(f){
    var element = f('#logocenter');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() < 100 ? 'In': 'Out')](300);           
    });
});
jQuery(function(d){
    var element = d('#logocenter');
    d(window).scroll(function(){
        element['fade'+ (d(this).scrollTop() > 100 ? 'Out': 'In')](300);           
    });
});

jQuery(function(a){
    var element = a('#nav');
    a(window).scroll(function(){
        element['fade'+ (a(this).scrollTop() > 100 ? 'Out': 'In')](500);           
    });
});

I found these sections of code, but for some reason #nav appears incorrectly, and then disappears.
Yes, and the appearance and disappearance of #logocenter would be desirable in one function.

Has anyone else experienced this, or is there a different way to do it?

Answer 1

Now there is one question left: how can I combine these two functions into one, otherwise it blinks twice)))

Just remove this piece of code:

jQuery(function(d){
    var element = d('#logocenter');
    d(window).scroll(function(){
        element['fade'+ (d(this).scrollTop() > 100 ? 'Out': 'In')](300);           
    });
});

Answer 2

$(window).scroll( () => {
let windowTop = $(window).scrollTop();
windowTop > 100 ? $('#logocenter').fadeIn(300) : $('#logocenter').fadeOut (300);
}