CODEWITHSUNDEEP
javascriptjquerycss
gjjr
gjjr

Reputation: 569

fade in element showing on page load

Im using jquery to fade in a hamburger menu on scroll, but for some reason it is showing on load, then when you scroll it fades out and back in again. Once you scroll down and back up it behaves correctly its just the issue with it showing on initial page load. How can I stop it showing on load?

jQuery(document).ready(function( $ ) {
$(window).scroll(function () {
       if ($(this).scrollTop() > 30) {
        $('#menuhamburger').fadeIn();
       } else {
        $('#menuhamburger').fadeOut();
       }
      });
     });

Upvotes: 0

Views: 349

Answers (1)

knetsi
knetsi

Reputation: 1631

Your scroll listener is after the ready event is complete so that means that first the page will load and then you'll monitor for scrolling.

So if you want the initially the hamburger menu to be hidden you'll either have to have a initial hidden state

#menuhamburger{
    display:none;
}

or you'll have to also execute your logic directly after $(document).ready()

here follows an example of the first variant, where the element #menuhamburger is initially hidden 

jQuery(document).ready(function( $ ) {
$(window).scroll(function () {
       if ($(this).scrollTop() > 30) {
        $('#menuhamburger').fadeIn();
       } else {
        $('#menuhamburger').fadeOut();
       }
      });
});
#container{
  height:10000px;
}

#menuhamburger{
  position:fixed;
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">


<div id="menuhamburger">
  Menu
</div>

</div>

Upvotes: 1

Related Questions