Currently, I have code that controls the hiding and showing of my navigation menu when a user scrolls up on the page.
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.onscroll = function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}
}
var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop){
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};
// Initialization
$(function(){
$('[data-scroll-speed]').moveIt();
});
});
css
#s-nav {
position: fixed;
display: block;
z-index: 999;
width: 100%;
top: 0; left: 0;
}
#s-nav.nav-up { top: -80px; }
I also want to add a feature that changes the CSS styling when the user reaches the top of the page or gets very close to it.
In essence, I aim for the navigation menu to be positioned lower on the page when the user is at the top, with an added functionality to toggle its visibility as the user scrolls through the content.