Fix Bug for a simple Jquery function

Question

Fix Bug for a simple Jquery function

Navigation

#1 by (0 votes)

0

Hello! I'm having a small problem with bugs on a site I'm putting together, where when you open the interface, a JQuery function that was made to replace the navbar logo with a larger one is not being applied. Only when you scroll down and return to the top of the interface does it take effect.

Image of the interface start:

Imageofhowitshouldlook:

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 major logo and # logo1 is the default navbar logo, which should disappear when the site opens at the top of the home screen.

javascript html jquery css

asked by anonymous 03.04.2018 / 16:59

1 answer

Check items in history N: N Echo respecting mysql line break

score 0 · Answer 1

This is how you put it to show the larger image when you scroll here $ (window) .on ('scroll', function () and not when the page loads in a larger width that 1024. Try to put it 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();
    }
});

}