CODEWITHSUNDEEP
javascriptjquery
gattocat
gattocat

Reputation: 37

Jquery to make div appear after scroll is showing on page load?

I input this code to make a small logo appear as the user scrolls past the navigation bar which works perfectly (see: http://wmlgatto.blogspot.co.uk/), although the logo appears when you load the page.

<script type='text/javascript'>

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y &gt; 140) {
    $(&#39;.stickylogo&#39;).fadeIn();
  } else {
    $(&#39;.stickylogo&#39;).fadeOut();
  }
});

</script>

I tried setting .stickylogo {display:none;} and this doesn't seem to fix the problem.

How do I make sure the div doesn't appear when the page loads? Thanks.

Upvotes: 0

Views: 101

Answers (1)

Deep
Deep

Reputation: 9794

Try with

.stickylogo {
    display: none !important;
}

the css applied on #navigationbar li is setting the display to inline.

and change the scroll function like this.

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 140) {
    $(".stickylogo").attr("style", "display: inline !important");
    $(".stickylogo").fadeIn();
  } else {
    $(".stickylogo").fadeOut();
  }
});

Upvotes: 1

Related Questions