如何使导航在向下滚动时消失但通过向上滚动显示？

Question

我想创建一个导航栏,当用户向下滚动页面时它会消失,但当用户向上滚动时会重新出现.有点像移动Chrome应用程序中的搜索栏.有谁知道怎么做？到目前为止我所拥有的只是一个固定在顶部的简单div.

这是一个示例 - 仅当用户向上滚动一点时才会显示导航.

Answer 1

使用jQuery的原型

这是你可以这样做的一种方式.

假设您的HTML,固定标题和一些内容:

<div class="header">The header or navigation elements go here...</div>
<div class="main">
    <p>Some content...</p>
</div>

你的CSS可能是:

.header {
    position: fixed;
    top: 0px;
    left: 9px;
    right: 9px;
    height: 50px;
    border: 1px dotted blue;
    background-color: rgba(125, 125, 125, 0.5);
}
.main {
    margin-top: 60px;
    border: 1px solid blue;
    width: 25%;
}

实现这一目标的jQuery如下:

$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $(".sidebar em").text("Up"); /* optional for demo */
        $(".header").show();
    } else {
        $(".sidebar em").text("Down");
        $(".header").hide();
    }
    this.previousTop = currentTop;
});

演示小提琴:http://jsfiddle.net/audetwebdesign/Mar62/

这是如何工作的

诀窍是计算你是向上滚动还是向下滚动.您可以通过存储.scrollTop位置的先前值来完成此操作.

使用单个成员定义匿名JavaScript对象以存储值:

    {
        previousTop: 0
    }

并将该对象传递给jQuery .scroll()函数.

当窗口滚动时,获取窗口滚动条的当前顶部位置,
然后将其与之前的值进行比较,然后如果向上滚动则显示标题或向下滚动时隐藏它.

在显示/隐藏决定之后,.previoustop使用currentTop值更新.

无需其他插件.您可以淡入/淡出标题或使用其他动画而不是简单的显示/隐藏.