当用户向下滚动并且向上滚动时重新出现，使固定的导航栏消失 [英] Make a fixed nav bar disappear when the user scrolls down and reappear upon scrolling up

问题描述

我想创建一个导航栏，当用户向下滚动页面时会消失，但用户向上滚动时会重新出现。种类似于移动Chrome应用中的搜索栏。有谁知道如何这样做吗？我到目前为止只有一个固定在顶部的简单div。

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

解决方案

原型使用jQuery

这里有一种方法可以做到这一点。

假设这是你的HTML，内容：

 < div class =header>标头或导航元素到这里...< / div> ; 
< div class =main> 
< p>一些内容...< / 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）。 ; / *可选演示* / 
 $（。header）。show（）; 
} else {
 $（sidebar em）。 ; 
 $（。header）。hide（）; 
} 
 this.previousTop = currentTop; 
}）; 
  

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

工作原理

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

定义一个匿名JavaScript对象单个成员存储值：

  {
 previousTop：0 
} 
  

并将该对象传递给jQuery .scroll（）函数。 / p>



当窗口滚动时，获取窗口滚动条的当前顶部位置，

然后将其与上一个值进行比较，然后显示

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

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

I want to create a navigation bar that disappears when the user scrolls down the page but reappears when the user scrolls back up. Kind of like the search bar that is in the mobile chrome app. Does anyone know how to do so? All I have so far is a simple div that is fixed to the top.

Here is an example - the navigtion only appears when the user scrolls up a little bit.

解决方案

Prototype using jQuery

Here is one way you might do this.

Suppose this your HTML, fixed header and some content:

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

Your CSS might be:

.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%;
}

The jQuery to make this happen is as follows:

$(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;
});

Demo fiddle: http://jsfiddle.net/audetwebdesign/Mar62/

How This Works

The trick is to compute whether your are scrolling up or scrolling down. You can do this by storing the previous value of the .scrollTop position.

Define an anonymous JavaScript object with a single member to store the value:

    {
        previousTop: 0
    }

and pass that object to the jQuery .scroll() function.

When the window scrolls, get the current top position of the window scroll bar,
then compare it to the previous value, and then either show the header if scrolling up or hide it if scrolling down.

After the show/hide decision, update the .previoustop with the currentTop value.

No other plug in required. You can fade in/out the header or use some other animation instead of a simple show/hide.

这篇关于当用户向下滚动并且向上滚动时重新出现，使固定的导航栏消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！