Fix Bug of a simple Jquery function

Question

Hello! I’m having a little problem regarding bugs on a site I’m setting up, where when the interface opens, a function JQuery which was made to replace the navbar logo by a larger one is not being applied. Only when you scroll down and return to the top of the interface does it take effect.

Screenshot of the beginning of the interface:

Picture of how it should look:

Jquery function:

if ($(window).width() > 1024) {

    $(window).on('scroll', function(){
        if($(window).scrollTop()){
            $('.logoresponsive').hide();
            $('#logo1').show();

        }else{
            $('#logo1').hide();
            $('.logoresponsive').show();
        }
    });
}

Where: . logoresponsive is the largest logo and #logo1 is the default navbar logo, which should disappear when the site opens at the top of the home screen.

Answer 1

It is so pq you put to show the larger image when scrolling the page here $(window). on('scroll', Function() and not when the page is loaded in a width greater than 1024. Try to put like this:

if ($(window).width() > 1024) {
  $('.logoresponsive').show();
  $('#logo1').hide();

$(window).on('scroll', function(){
    if($(window).scrollTop() > tamanho da sua barra de navegação){
        $('.logoresponsive').hide();
        $('#logo1').show();

    }else{
        $('#logo1').hide();
        $('.logoresponsive').show();
    }
});

}