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

Answer 2

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

将其更改为

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

你忘了＃：）

jquery导航向上滚动幻灯片，不工作

2 个答案: