向下滚动时如何使元素消失并重新出现？

Question

So on my website I have a fixed bar at the top which spans the length of the page, the bar is a h1.所以在我的网站上，我在顶部有一个固定的栏，横跨页面的长度，栏是 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.当您向下滚动时，迷你导航会妨碍您阅读页面内容，因此我想让导航在用户向下滚动时消失，并且还可以通过将鼠标移到顶部/单击顶部来使其重新出现栏/在触摸屏上滑动顶部栏等。

How do I go about doing this?我该怎么做？

Here's the HTML:这是 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 -->

And the CSS:和 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;
}

The bar is h1 and the mini nav is secondaryNav栏是 h1，迷你导航是 secondaryNav

Answer 1

You can use scrollTop for this and check on how much user had scrolled down like您可以为此使用 scrollTop 并检查用户向下滚动了多少

$(function() {
  $(document).on("mousewheel", function() {
    if($(document).scrollTop() > 100){
        $('.secondaryNav').show();
        $('.mainHeader h1').hide();
    } else {
        $('.secondaryNav').hide();
        $('.mainHeader h1').show();
    }; 
  });
});

Here is working Fiddle (change the css a little bit for it to look better, but the main point is there)这是工作Fiddle （稍微更改 css 以使其看起来更好，但要点就在那里）

Answer 2

this simple code might help u.这个简单的代码可能对你有帮助。 JSFIDDLE 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;
          });

Answer 3

Here is the simple and commonly usefull way for showing and hiding specific div on movement of your mouse:这是在鼠标移动时显示和隐藏特定 div 的简单且常用的方法：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
</style>
</head>
<body>


<button onmousewheel="myFunction()">wheel mouse on me to hide and show div</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

向下滚动时如何使元素消失并重新出现？

问题描述

3 个解决方案

解决方案1
0 2014-04-03 15:15:15

解决方案2
0 2014-06-05 13:27:53

解决方案3
0 2019-04-01 17:19:55

向下滚动时如何使元素消失并重新出现？

问题描述

3 个解决方案

解决方案1 0 2014-04-03 15:15:15

解决方案2 0 2014-06-05 13:27:53

解决方案3 0 2019-04-01 17:19:55

解决方案1
0 2014-04-03 15:15:15

解决方案2
0 2014-06-05 13:27:53

解决方案3
0 2019-04-01 17:19:55