Hide header on scroll down, show on scroll up

I was having the same problem… and found the solution.

I created a js file /js/scrolldu.js with:

———————-

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $(‘.top-header-menu’).outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop – st) <= delta)
return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is “behind” the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$(‘.top-header-menu’).removeClass(‘nav-down’).addClass(‘nav-up’);
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$(‘.top-header-menu’).removeClass(‘nav-up’).addClass(‘nav-down’);
}
}

lastScrollTop = st;
}

———————-

After this i add this code to theme’s functions.php

———————-

function my_scripts_method() {
wp_enqueue_script(
‘scrolldu’,
get_stylesheet_directory_uri() . ‘/js/scrolldu.js’,
array( ‘jquery’ )
);
}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );

function init_jquery() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#8217;);
}

add_action(‘init’, ‘init_jquery’);

———————-

and that’s my menu div
———————-

<div class=”top-header-menu”>
<!– menu code –>
</div>

———————-

hope it works!

Thank you for the code. It is actually working and the class nav-down is adding on scroll up.

However, once I have reached the top of my window, the class nav-down stays and I end up with a weird effect. it doesn’t retrieve its initial layout.

Do you know how I can fix that?

.top-header-menu {
z-index: 999;
position: fixed;
width:100%;
height: 50px;
top: 0;
left: 0;
transition: top 0.2s ease-in-out;
}

/* Auxiliar do scroll */

.nav-up {
top: -50px !important;
}

That’s my css, see if you is similar!

Yes my css is good, I have even tried with the one you sent and so what’s happening is that my navigation bar does not go back to its initial place and format once I have reached its initial position.

The JS is still applying.

What I would ultimately love to do will be to make the script start after it passes my navigation bar and stop once it reached the bottom of the Navigation bar

can you post you code here?

Here is my script

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.main-navigation').outerHeight();

$(window).scroll(function (event) {
    didScroll = true;
});

setInterval(function () {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if (Math.abs(lastScrollTop - st) <= delta)
    return;

// If they scrolled down and are past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
        $('.main-navigation').removeClass('nav-down').addClass('nav-up');
    } else {
// Scroll Up
        if (st + $(window).height() < $(document).height()) {
            $('.main-navigation').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

I am trying to implement this script at the beginning to execute my script once people have scroll down to my nav bar and stop the script once they have scrolled back up to my nav bar but I am having problems. It does not work.

var reachedFromTop = false;
var reachedFromBottom = false;
$(window).scroll(function() {
    //After scrolling 100px from the top...
    if ($(window).scrollTop() > 100 ) {
        if (!reachedFromTop) something();
        reachedFromTop = true;
    } else if (reachedFromTop && otherCondition) {
        if (!reachedFromBottom) somethingElse();
        reachedFromBottom = true;
    }
});

I am trying to do something similar, I have a photograph on the homepage that fills the whole view port. I want it to fade out after the user scrolls down about 300px and to fade in as the user gets near the top.

my test Website is https://nootech.co.uk/three/

the code on the front-page.php template is:

<code></code><div class="hero">
    <div class="text-center">
      <h1 class="myh1"><?php bloginfo( 'name' ); ?></h1>
    </div>
  </div><!-- End of hero div -->

the CSS is:

.hero {
    background-color: #c0c0c0;
    background-image: url(images/home-header.jpg);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    height: 100vh;
    overflow: hidden;
}

I have tried various solutions that I have found on the Web but none work with my code.

I found a solution

I added a bit of simple code does what I wanted

$ = jQuery.noConflict();

$(document).ready(function(){
    $(window).scroll(function(){
    $(".hero").css("opacity", 1 - $(window).scrollTop() /1000);
  });

});