How do I stop a div from loading accidentally on first page load?

user_4112751 0
Viewed 318

I have a content navigation bar for my website which is supposed to show only after the user has scrolled 800px down the page. I'm using this JS code to implement this behaviour:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $("#pn-navigation-bar").fadeIn();
  } else {
    $("#pn-navigation-bar").fadeOut();
  }
});

However, whenever the page initially loads the navigation bar still shows up but disappears after the user scrolls a little. This is demonstrated in this video here and the images below:

enter image description here enter image description here

But the JS code specifies not to show the div before a certain amount has been scrolled. What can I do to fix this?

wordpress css html javascript
1 Answers

The logic doesn't specify "not to show the div before a certain amount has been scrolled" but rather, it specifies something more like "when the page is scrolled, hide the div if a certain amount has not been scrolled." So you need to also specify the initial visibility of the nav bar, once the page has been loaded but before any scroll has happened.

Just set style="display:none;" on your #pn-navigation-bar to hide it initially.

or $("#pn-navigation-bar").hide() in your document ready if you don't want to change the css.

user_20793450
Related