Sticky menu not visible in the start view

$(window).scroll(function(){
if ($(window).scrollTop() >= 800) {
$('nav').addClass('stickyheader');
$('nav div').addClass('visibility');
}
else {
$('nav').removeClass('stickydheader');
$('nav div').removeClass('visiibility');
}
}); 

How to hide such header in the start (It is shown and visible) that it will be shown only when >= 800. In this example we will see header under banner at the top but it should be shown only if we scroll >= 800

It would be better if you could put up a codepen (or similar) so we could see the whole thing in action. You do have two typos in your above code where you have spelled stickyheader and visibility incorrect in the ‘else’ part of the JS.

I’m not quite sure what you are asking but if you don’t want the menu visible at the top of the page by default then hide it with css and then once the page has scrolled you can show it using the css class that was added.

Here’s a rough codepen:

I’m not sure that’s what you meant because that means the nav isn’t visible until scrolled. Usually you would display it at the top of the page by default and once it scrolls away you then position:fix it into place.

In this example, it is not visible when you see the banner and when you scroll it will be visible as the top menu will be already there and displayed. It is flyin menu and it will stick to the top part but not displayed when you see the page and only when you scroll. Your example works as the menu is not displayed in the start. Thank you.

Sorry but there is not enough information for me to help you solve the problem.

You need to provide a demo that details the problem or a link to the page in question so we can see what’s going on. The snippet of js you posted is not much use without the CSS and relevant html. If you can put up a codepen demo (as I have done) then we can see more clearly what your problem is and how we can help.

There is no banner in your code supplied so we can’t guess what you mean.

I have no idea what that means without some sort of context.:slight_smile:

That statement is contradictory as you say your menu is not displayed until page scrolls but my example is wrong because the menu is not displayed until page scrolls although that seems to be what you are asking for?

As you see its hard to second guess without more precise details and code. I’m sure you know what you mean because you are familiar with it but until we know what you mean its hard to give specific help. However my example shows you how to hide and show the menu so its not a great leap to modify it to your needs unless I have completely missed the point :slight_smile:

Thank you for all replies. I will try to test your example.

The scroll event is a slow and jaggy way to deal with things.
It’s prefereable to use CSS media queries to instead.

Media queries will be no use for seeing how far the page has scrolled?

Of course the scroll event should be throttled to avoid holding up the page.

Or were you referring to something else?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.