Image is not displayed when reloading the page

Asked

Viewed 39 times

-4

My code makes when I scroll down, the logo is shown. And when I scroll back, it hides.

It happens that when I’m in the middle of the page, with it active, and I restart the page - refresh - the browser throws me in the middle of the page where I was and the logo does not appear. Even though I’m almost at the end of the site. Only after I tap scroll that he displays.

How to solve this?

My code: 

$(document).bind('ready load scroll resize', function() {
      if($(window).scrollTop() > 100) {
        $(".logoHeader").addClass("logoHeaderHide");
        $(".logoNav").addClass("logoNavShow");
      } else {
        $(".logoHeader").removeClass("logoHeaderHide");
        $(".logoNav").removeClass("logoNavShow");
      }
});
javascript

  • Exchange the document for window... the only event heard by document on the list you put scroll, i.e., the others (ready, load and resize) are there without any effect.

2 answers

1

You need to check the position of the scroll when DOM loading is completed.

You can duplicate the block if/else, but a little more correct way is to create a function for such.

Take my example, within the reproducible of your code:

function logoScroll() {
    if ($(window).scrollTop() > 100) {
        $(".logoHeader").addClass("logoHeaderHide");
        $(".logoNav").addClass("logoNavShow");
    } else {
        $(".logoHeader").removeClass("logoHeaderHide");
        $(".logoNav").removeClass("logoNavShow");
    }
}

$(document).on('scroll resize', function() {
    logoScroll();
});

$(document).ready(function(){
    logoScroll();
});
body {
    margin: 0;
}
div.content {
    background-color: #babaca;
    height: 4096px;
}
div.logoNav {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
div.logoNav.logoNavShow {
    display: block;
}
div.logoNav > img {
    max-width: 200px;
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="logoNav">
            <img src="http://pigment.github.io/fake-logos/logos/large/color/fast-banana.png">
        </div>
    </body>
</html>

1


I recommend changing the method .bind() (obsolete) by .on().

As for the code, you listed 4 events to be listened to by the object document:

  • ready
  • load
  • scroll
  • resize

Of these 4, only the event scroll is heard by document, namely, your if will only be executed when you scroll the page. The other 3 events will be ignored.

However, when reloading the page and the browser throws you to the point where you were and the scroll event is triggered, you should run the if(?). At least this should work.

Another thing is that there is no event ready in Javascript. There is .ready() jQuery, which is a method. That is, the ready from the list means nothing.

Your problem is solved just by changing the $(document) for $(window) and removing the ready which has no function, thus:

$(window).bind('scroll load resize', function() {...

Or using .on() (preferred if using version 1.7 or higher):

$(window).on('scroll load resize', function() {...

  • It worked, thanks! And thanks for the explanation too.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.