Hey, as long as your classes (and nested classes) are named properly, the following code should work just fine. Have a closer look at the code, you should use one class and two nested classes. Adding a transition in the Style section allows you to control the easing curve and timing. Make sure none of the nested classes are applied before publishing, the JS will take care of those.
<script>$(document).ready(function(){
/** ===========================================
Hide / show the master navigation menu
============================================ */
// console.log('Window Height is: ’ + (window).height());
// console.log('Document Height is: ' + (document).height());
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
/*
If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.
*/
if (currentScroll > 10 && currentScroll < $(document).height() - $(window).height()){
/*
If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav.
*/
if (currentScroll > previousScroll){
window.setTimeout(hideNav, 50);
/*
Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
*/
} if (currentScroll < (previousScroll - 40)) {
window.setTimeout(showNav, 50);
}
/*
Set the previous scroll value equal to the current scroll.
*/
previousScroll = currentScroll;
}
if (currentScroll < 1) {
window.setTimeout(top, 50);
}
});
function hideNav() {
("[data-nav-status='toggle']").removeClass("show").addClass("hide");
}
function showNav() {
("[data-nav-status=‘toggle’]").removeClass(“hide”).addClass(“show”);
}
function top() {
$("[data-nav-status=‘toggle’]").removeClass(“hide”).removeClass(“show”);
}
});
