如何在滚动时导航消失，但通过滚动显示导航？ [英] How to make a navigation which disappears while scrolling down but shows up by 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点缀蓝色; 
 background-color：rgba（125，125，125，0.5）; 
} 
 .main {
 margin-top：60px; 
 border：1px纯蓝色; 
宽度：25％; 
} 
  

使jQuery发生这种情况如下所示：

$ b （
$ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' {
var currentTop = $（window）.scrollTop（）;
if（currentTop< this.previousTop）{
$（。sidebar em）。text（Up） ; / *可选用于演示* /
$（。header）。show（）;
} else {
$（。sidebar em）。text（Down） ;
$（。header）。hide（）;
}
this.previousTop = currentTop;
}）;

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

工作原理

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

定义匿名JavaScript对象

  {
 BeforeTop：0 
} 
 
 code> 

并将该对象传递给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屋！