向下滾動“向上滑動”導航菜單，並在向上滾動時立即顯示

Question

我希望我的導航菜單在向下滾動時立即向上滑動到某個水平，並在向上滾動時重新出現。 我希望它與以下菜單完全相同： http : //www.defringe.com/如果您注意到，當我們向下滑動時，我們仍然可以注意到菜單的提示。

現在，到目前為止，我能找到的是一個完全隱藏菜單的代碼。 這是我的代碼：

HTML：

<header id="header-wrap">
<nav id="topnav">
    <ul>
      <li>point1</li>
      <li>point2</li>
      <li>point3</li>
      <li>point4</li>
    </ul>
</nav>

CSS：

#topnav{
position:absolute;
margin:auto;
padding-top:20px;
height:60px;
width:576px;
bottom: 0;}

#header-wrap{
background:#f1f2f2;
height:60px;
position:fixed;
width:100%;}

jQuery的：

 $(function(){
    $('header').data('size','big');
   var previousScroll = 0;
    headerOrgOffset = $('#topnav').height()

$('#header-wrap').height($('#topnav').height());
});

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp("fast");
        } else {
            $('#header-wrap').slideDown("fast");
        }
    } 
    previousScroll = currentScroll;
});

謝謝！

Answer 1

在這種情況下，您不想使用slideUp / slideDown，而是構建自己的功能，該功能僅將菜單滑動至-margin

像

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
    if (currentScroll > previousScroll) {
        // Say the menu height is 100px
        $('#header-wrap').css("margin-top", "-90px");
    } else {
        $('#header-wrap').css("margin-top", "0");
    }
} 
previousScroll = currentScroll;
});

顯然，您需要正確設置菜單格式，進行修復等，但這應該可以解決問題。 如果您不確定如何使它工作，請告訴我，我可以為您完全做到。