向下滚动时如何使元素消失并重新出现? [英] How do I make an element disappear and reappear when scrolling down?

问题描述

所以在我的网站上，我在顶部有一个固定的栏，横跨页面的长度，栏是 h1.与之相连的是一个带有返回和主页按钮的迷你导航，位于其下方并且也是固定的.当您向下滚动时，迷你导航会妨碍您阅读页面内容，因此我想让导航在用户向下滚动时消失，并且还可以通过将鼠标移到顶部/单击顶部来使其重新出现栏/在触摸屏上滑动顶部栏等.

So on my website I have a fixed bar at the top which spans the length of the page, the bar is a h1. Attached to that is a mini navigation with back and home buttons which sits below it and is also fixed. The mini nav gets in the way when reading the page content as you scroll down so I would like to make the nav disappear when the user scrolls down and also give the option to have it reappear by moving the mouse over the top/clicking the top bar/swiping the top bar on a touch screen etc etc.

我该怎么做?

这是 HTML:

<header class="mainHeader">
  <h1>Page Title</h1>
    <nav class="secondaryNav">
      <a href="home.htm"><img class="backButton" src="img/back2.png" alt="Back Button"></a>
      <a href="home.htm"><img class="homeButton" src="img/home.png" alt="Home Button"></a>
    </nav>
    <aside><p id="countdown"></p></aside>
</header>
<!-- end .mainHeader -->

和 CSS:

.mainHeader h1 {
    position: fixed;
    top: 0;
    width: 100%;
    background: #ea594e;
    box-shadow: 0 0 3px 3px #888888;
    font-family: verdana;
    font-variant: small-caps;
    color: white;
    border-bottom: 1px solid black;
    margin: 0;
    padding-bottom: 0.5%;
    text-align: center;
}

.mainHeader .secondaryNav {
    background: #ffcda4;
    box-shadow: 0 3px 3px 1px #888888;
    border: 1px solid;
   border-top: none;
    width: 400px;
    position: fixed;
    top: 49px;
    left: 50%;
    margin-left: -200px;
    border-radius: 0 0 50px 50px;
    padding-top: 5px;
}

栏是h1，迷你导航是secondaryNav

The bar is h1 and the mini nav is secondaryNav

推荐答案

这个简单的代码可能对你有所帮助.JSFIDDLE

this simple code might help u. JSFIDDLE

 //Keep track of last scroll
          var lastScroll = 0;
          $(window).scroll(function(event){
              //Sets the current scroll position
              var st = $(this).scrollTop();
              //Determines up-or-down scrolling
              if (st > lastScroll){
//secondaryNav disappears when scrolled down
                $(".secondaryNav").css("display","none");
              } 
              else {
//secondaryNav disappears when scrolled up
               $(".secondaryNav").css("display","block");
              }
              //Updates scroll position
              lastScroll = st;
          });

这篇关于向下滚动时如何使元素消失并重新出现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！