Question

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

Here is an example - 导航仅在用户向上滚动时显示。

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()函数。

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

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

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

Answer 2

你的意思是像g +那样吗？

你可以在这里使用这个插件（https://github.com/brandonaaron/jquery-mousewheel）来检测mousewheel事件并根据它采取行动

$('#my_elem').mousewheel(function(event, delta, deltaX, deltaY) {
    console.log(delta, deltaX, deltaY);
});

还有一个测试页here

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

2 个答案:

使用jQuery的原型