Sticky menu only on specific scroll position

[toplisek]

I have tested code like
$(window).scroll(function () {
if($(window).scrollTop() > 100) {
$("#head").addClass('stickymenu');
} else {
$("#head").removeClass('stickymenu');
}
});

How to hide menu in the start and only shown when it is scrolled >100 vh

CSS:
.slide {
height: 100vh;
}

[justpassing]

May be set the initial style with something like "visibility:hidden;" "display:none;". And in your stickymenu class "visibility:visible !important;" "display:block !important;"

Just a thought, I didn't try it .

[toplisek]

I have found solution:
$(window).scroll(function(){
if ($(window).scrollTop() >= 700) {
$('nav').addClass('stickyheader');
$('nav div').addClass('visibility');
}
else {
$('nav').removeClass('stickydheader');
$('nav div').removeClass('visiibility');
}
});

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

[justpassing]

As I said in my previous post, just set the initial style to hidden, or am I missing something?

[robzilla]

Your code would keep executing addClass() or removeClass() whenever the user scrolls, which is very inefficient and likely to result in errors (you can't remove a class twice). Maybe store the current state of the menu as a boolean and fire the functions only when necessary.

[NickMNS]

Instead of removing a class set the style within the class.

This is what I have done (no Jquery) it shows a navigation menu at the bottom of the page for 5 secs each time the users scrolls:

 window.addEventListener('scroll', function() {
 var botNav = document.getElementById("botnav");
 botNav.style.opacity = 1;
 setTimeout(function () {
  botNav.style.removeProperty('opacity');
 }, 5000); 
 });

[Steven29]

$(window).scroll(function () {
if($(window).scrollTop() > $(window).height) {
$("#head").addClass('stickymenu');
} else {
$("#head").removeClass('stickymenu');
}
});

[robzilla]

This is what I have done (no Jquery) it shows a navigation menu at the bottom of the page for 5 secs each time the users scrolls:

In the same vein as my earlier comment, you can move var botNav = document.getElementById("botnav"); outside the function so you won't be calling the getElementById() function every time the event fires. And with the scroll event, that may be more often than you think: about 12 times for every step of my mouse's scroll wheel. I guess it's still a micro-optimization, but it's good to be aware of these sneaky things.

var i = 0;
window.addEventListener('scroll', function() {
 i++;
 console.log(i);
});

[NickMNS]

@robzilla Yes your are correct, I missed that. Updating on my end...

var botNav = document.getElementById("botnav");
window.addEventListener('scroll', function() {
 botNav.style.opacity = 1;
 setTimeout(function () {
 botNav.style.removeProperty('opacity');
 }, 5000); 
});

[toplisek]

Thank you for all replies.