10

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

这是一个示例- 导航仅在用户向上滚动一点时出现。

4

2 回答 2

10

使用 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值更新 。

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

于 2013-06-16T19:54:20.970 回答
0

你的意思是像 g+ 是吗？

您可以在此处使用此插件（https://github.com/brandonaaron/jquery-mousewheel）来检测鼠标滚轮事件并根据该事件采取行动

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

这里还有一个测试页面

于 2013-06-16T18:52:27.367 回答