Welcome to WebmasterWorld Guest from 35.172.100.232

Forum Moderators: open

Message Too Old, No Replies

Sticky menu only on specific scroll position

     
8:30 am on Oct 8, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1105
votes: 1


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;
}
9:36 am on Oct 8, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


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 .
7:23 am on Oct 9, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1105
votes: 1


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
10:07 am on Oct 9, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


As I said in my previous post, just set the initial style to hidden, or am I missing something?
1:57 pm on Oct 9, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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.
2:38 pm on Oct 9, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2692
votes: 815


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);
});
3:29 pm on Oct 9, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:May 1, 2018
posts: 102
votes: 16


$(window).scroll(function () {
if($(window).scrollTop() > $(window).height) {
$("#head").addClass('stickymenu');
} else {
$("#head").removeClass('stickymenu');
}
});
4:22 pm on Oct 9, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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);
});
9:44 pm on Oct 9, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2692
votes: 815


@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);
});
8:12 am on Oct 10, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1105
votes: 1


Thank you for all replies.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members