Header appear on scroll inactive on mobile

Vote count:

0

I have a header which appears when i scroll. Here is the piece of code;

$(window).scroll(function() {
    if ($('#navbar').scrollTop() > 400) {
        $( "#navbar" ).fadeIn();
    } else {
        console.log('there');
        $( "#navbar" ).fadeOut();
    }
});

On desktop this works perfectly fine. However, on mobile this does not work. At first the header is invisible and when I scroll; the header does not appear at all while it does do this on a desktop.

HTML:

<nav id="navbar">
    <div class="nav-wrap">
        <div class="brand">
            <img src="style/img/logo.png">
        </div>
        <ul class="navlist">
            <li class="nav-li"> <a href='#'>    Home        </a></li>
            <li class="nav-li"> <a href='#'>    Works       </a></li>
            <li class="nav-li"> <a href='#'>    Contact     </a></li>
        </ul>
    </div>
</nav>

CSS:

#navbar {
    width: 100%;
    height: 65px;
    background-color: #fff;
    border-bottom: 1px solid #000;
    position:fixed;
    display:none;
    top:0;
    left:0;
}

Here is a fiddle: http://ift.tt/1AOapxu

asked 22 secs ago

Chris Holstein

33

Header appear on scroll inactive on mobile