Как сделать появление и исчезновение элементов при скроле Jquery?

Question

[Михаил Гильмутдинов]

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

Нашел вот такие участки кода но почему-то некорректно появляется #nav, а потом исчезает.
Да и появление и исчезновение #logocenter хотелось бы в одной функции.

Может кто сталкивался с подобным, или тут нужно другим способом делать?

Answer 1

[Bowen]

Теперь остался один вопрос как мне две эти функции совместить в одну, а то она два раза моргает)))

Просто удалите этот кусок кода:

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

Answer 2

[Михаил Гильмутдинов]

Нашел ошибочку))) в #nav просто забыл поменять In и Out местами.

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

Теперь остался один вопрос как мне две эти функции совместить в одну, а то она два раза моргает)))

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

Comments

[Михаил Гильмутдинов]

Действительно)) Спасибо)

Answer 3

[Ramazanches]

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