向下滚动“向上滑动”导航菜单,并在向上滚动时立即显示

时间:2014-03-10 11:25:24

标签: javascript jquery html

我希望我的向导菜单在向下滚动时立即滑动到某个级别,然后在我向上滚动时立即重新出现。我希望它与下面的菜单完全一样: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;
});

谢谢!

1 个答案:

答案 0 :(得分: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;
});

显然你需要正确格式化菜单,修复它等等,但这应该可以解决问题。如果您不确定如何使其工作,请告诉我,我可以完全为您完成。