CODEWITHSUNDEEP
javascriptjqueryhtml
s.f.b.h
s.f.b.h

Reputation: 73

jquery navigation scroll up on slide, not working

any one who have a solution for me why is it not working? most websites let navigation disappear on slide down and show whe you toggle back up, in my case i tried to insert a Script, and tried not to effect the HTML code and use from what I have, but nothing works. the Script-

<script>
var previousScroll = 0,
headerOrgOffset = $('#header').offset().top;

$('target').height($('#header').height());

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').fadeOut();
        } else {
            $('#header').fadeIn();
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});
</script>

The HTML-

<nav class="navi" id="target">
    <div class="menu" id="header">

        <li><a class="link-1" href="#">home</a></li>
        <li><a class="link-1" href="#">second</a></li>
        <li><a class="link-1" href="#">third</a></li>
        <div class="logo">
        <li><a href="#"><img alt="Brand" src="logo.png" height="40px" width="60px"></a><li>
        </div>

    </div>
<div class="handle"><p>menu</p></div>
    </nav>

Upvotes: 0

Views: 114

Answers (2)

Muhammad Umer
Muhammad Umer

Reputation: 18097

Demo: https://jsfiddle.net/66jk442L/

here is one way to do it.

var timeout,
navbar = $('.navbar'),
    h = navbar.height();

$(window).scroll(function () {
    clearTimeout(timeout);
    if ($(this).scrollTop() > 100) {
        timeout = setTimeout(hideBar, 1200);
    } else {
        showBar();
    }
});

function showBar() {
    navbar.css('height', h);
    $('.navbar > *').show();
}

function hideBar() {
    $('.navbar > *').hide();
    navbar.css('height', 5);
}

navbar.hover(function () {
    showBar();
}, function () {
    clearTimeout(timeout);
    if ($(window).scrollTop() > 100) {
        timeout = setTimeout(hideBar, 1200);
    }
});

Upvotes: 1

Mohamed Mohamed
Mohamed Mohamed

Reputation: 120

$('target').height($('#header').height());

change it to

$('#target').height($('#header').height());

you forgot # :)

Upvotes: 0

Related Questions