Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • can you post you code here?

    .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!

    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!

Viewing 3 replies - 1 through 3 (of 3 total)