javascript - jquery 导航在幻灯片上向上滚动，不起作用

Question

任何人都可以为我提供解决方案，为什么它不起作用？大多数网站让导航在向下滑动时消失，并显示您何时切换回来，在我的例子中，我尝试插入一个脚本，并尝试不影响 HTML 代码并使用我所拥有的内容，但没有任何效果。脚本-

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

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>

Answer 1

演示: https://jsfiddle.net/66jk442L/

这是一种方法。

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);
    }
});