滚动时如何使导航栏消失？

Question

I want to make it so when a user is scrolling, the expanded navbar in smaller view will disappear. 我要这样做，以便在用户滚动时，较小视图中展开的导航栏将消失。 Here's what it looks like: 看起来是这样的：

When the user scrolls, I want that to collapse. 当用户滚动时，我希望它折叠。

https://jsfiddle.net/2pzx0fqy/ https://jsfiddle.net/2pzx0fqy/

Ignore the broken images, how can I make it so the navbar disappears? 忽略损坏的图像，如何使导航栏消失？ Basically, how I'm toggling the navbar right now is using max-height and transition. 基本上，我现在如何切换导航栏是使用max-height和transition。 So when the user scrolls, how can I make it so that it'll collapse the navbar but also the user can click it again? 因此，当用户滚动时，如何使它折叠以使导航栏折叠，同时用户也可以再次单击它呢？

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel = "stylesheet" type ="text/css" href = "nav.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <nav class = "navigationBar">
    <img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
    <ul class = "linkBar">

      <li><a href = "#"><i class="fa fa-home"></i> Home</a></li>
      <li><a href = "#"><i class="fa fa-star" aria-hidden="true"></i> Skills</li>
      <li><a href = "#"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li>
      <li><a href = "#"><i class="fa fa-user" aria-hidden="true"></i> About</a></li>
      <li><a href = "#"><i class="fa fa-briefcase" aria-hidden="true"></i> Services</a></li>
      <li><a href = "#">Miscellaneous</a></li>

    </ul>
  </nav>

  <section class = "title">

    <img src = "me.jpg" class = "me">

    <h1 class = "top-name"></h1>
    <h2 class = "top-subtitle">Student - Web Developer - Tutor/Educator</h2>
  </section>

  <section class = "skills">

    <h1 class = "head-title">Skills</h1>

    <div class = "skill-icons">

      <img src = "bigicons/java.png" id = "java">
      <img src = "bigicons/c.png">
      <img src = "bigicons/html.png">
      <img src = "bigicons/js.png">
      <img src = "bigicons/css.png">
      <img src = "bigicons/git.png">

    </div>

    <div class = "modal" id = "modal">
      <div class = "modal-content" id = "lol">

        <span class="close">&times;</span>
        <p>This is a Modal</p>

      </div>
    </div>

  </section>

  <section class = "about">

    <h1 class = "head-title">About</h1>
    <article class = "about-article">

    </article>

  </section>

  <section class = "contact">
    <article>
    Interested in collaborating or just want to get to know me more? Lucky for you, there are several ways you can reach out to me.
    </article>
    <article>

    </article>
  </section>

    <script>

    $('.menuIcon').on('click', function() {
      $('nav ul').toggleClass('show');

    });

    $(function() {

      $(document).on("mousewheel", function() {

        $('nav ul').toggleClass('hide');

      });
    });

    var modal = document.getElementById('modal');
    var jBtn = document.getElementById('java');
    var span = document.getElementsByClassName("close")[0];
    jBtn.onclick = function() {

      modal.style.display = "block";

    }

    span.onclick = function ()
    {
      modal.style.display = "none";
    }

    window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
    }

  </script>
</body>
</html>

CSS: CSS：

@import url('https://fonts.googleapis.com/css?family=Asap');
@import url('https://fonts.googleapis.com/css?family=Bitter|Dosis|Fira+Sans|Nunito|Oxygen');
body
{
  background-color: #598392;
  margin: 0;
  padding: 0;
  font-family: 'Bitter', 'Asap', sans-serif;

}

.menuIcon
{
  padding:20px;
  display:none;
  cursor:pointer;
  transition: transform: 0.5s;
}

.navigationBar
{
  background-color: #2E86AB;
  width:100%;
  overflow:hidden;
  position:fixed;
  z-index: 1;
}
.title
{
  overflow:hidden;
  display: flex;
  flex-direction: column;
  background-color: #F7C174;
  padding-top:100px;
  align-items: center;
}

.top-name
{
  font-size:75px;
  position: relative;
  top:-60px;
  text-align: center;
}
.top-subtitle
{
  text-align: center;
  position: relative;
  top:-80px;
}
.navigationBar li
{
  padding:20px;
  display: inline;
  list-style-type:none;
  font-size: 22px;
}

a
{
  color: #EFF6E0;
  text-decoration: none;
}
a:hover
{
  color: #AEC3B0;
}
nav ul
{
  padding: 20px;
  margin: 0;
  transition: max-height 1s;
}

.title h1
{
  padding: 75px 0 0 20px;
}
.title article
{
  padding: 20px;
}


.me
{
  width:250px;
  height:250px;
  border-radius: 100%;
}


.skills
{
  background-color: #FFEECF;
  overflow: hidden;
  height:auto;
  padding-bottom: 50px;
}

.skill-icons
{

  display:flex;
  width:100%;
  justify-content:space-around;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;

}
.skill-icons > img
{
  padding: 50px;
  height:128px;
  width:128px;

}

.head-title
{
  font-size: 60px;
  text-align: center;
}
.about
{
  overflow: hidden;
  background-color: #F7C174;
}
.about-article
{
  padding: 50px;
}

.contact
{
  background-color: #FFEECF
}

/* Modal Stuff */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.show
{
  display:block;
}

@media only screen and (max-width: 768px)
{
  .menuIcon
  {
    display:block;
  }

  .navigationBar li
  {
    display:block;
    padding: 10px;
    text-align: left;
    margin-left: 30px;
    font-size: 16px;
  }
  nav ul
  {
    max-height: 0;
    padding: 0px;

  }


  .show
  {
    max-height: 250px;

  }

  .hide
  {
    max-height: 0px;
  }
  .title article
  {
    padding: 20px;
  }

  .skill-icons > img
  {
    padding: 20px;
    height:30%;
    width:30%;
  }

}
/*
@media only screen and (min-width: 768px)
{
  nav ul
  {
    display: block !important;
  }
}
*/

Answer 1

Add this code to your javaScript: 将此代码添加到您的javaScript中：

When you scroll down, it'll fade away. 向下滚动时，它会消失。 When the user scrolls back up, it fades back in. 当用户向上滚动时，它会淡入。

If this isn't exactly what you want, let me know. 如果这不是您想要的，请告诉我。

EDIT: Per posters request, I have updated javaScript to make it so that no matter where you scroll up, it will fade back in. 编辑：根据发布者的请求，我已经更新了javaScript以使其能够使用，因此无论您在何处向上滚动，它都将逐渐消失。

 var mywindow = $(window); var mypos = mywindow.scrollTop(); var up = false; var newscroll; mywindow.scroll(function () { newscroll = mywindow.scrollTop(); if (newscroll > mypos && !up) { $('.navigationBar').stop().fadeOut(); up = !up; console.log(up); } else if(newscroll < mypos && up) { $('.navigationBar').stop().fadeIn(); up = !up; } mypos = newscroll; });

 @import url('https://fonts.googleapis.com/css?family=Asap'); @import url('https://fonts.googleapis.com/css?family=Bitter|Dosis|Fira+Sans|Nunito|Oxygen'); body { background-color: #598392; margin: 0; padding: 0; font-family: 'Bitter', 'Asap', sans-serif; } .menuIcon { padding:20px; display:none; cursor:pointer; transition: transform: 0.5s; } .navigationBar { background-color: #2E86AB; width:100%; overflow:hidden; position:fixed; z-index: 1; } .title { overflow:hidden; display: flex; flex-direction: column; background-color: #F7C174; padding-top:100px; align-items: center; } .top-name { font-size:75px; position: relative; top:-60px; text-align: center; } .top-subtitle { text-align: center; position: relative; top:-80px; } .navigationBar li { padding:20px; display: inline; list-style-type:none; font-size: 22px; } a { color: #EFF6E0; text-decoration: none; } a:hover { color: #AEC3B0; } nav ul { padding: 20px; margin: 0; transition: max-height 1s; } .title h1 { padding: 75px 0 0 20px; } .title article { padding: 20px; } .me { width:250px; height:250px; border-radius: 100%; } .skills { background-color: #FFEECF; overflow: hidden; height:auto; padding-bottom: 50px; } .skill-icons { display:flex; width:100%; justify-content:space-around; flex-direction: row; flex-wrap: wrap; height: auto; } .skill-icons > img { padding: 50px; height:128px; width:128px; } .head-title { font-size: 60px; text-align: center; } .about { overflow: hidden; background-color: #F7C174; } .about-article { padding: 50px; } .contact { background-color: #FFEECF } /* Modal Stuff */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .show { display:block; } @media only screen and (max-width: 768px) { .menuIcon { display:block; } .navigationBar li { display:block; padding: 10px; text-align: left; margin-left: 30px; font-size: 16px; } nav ul { max-height: 0; padding: 0px; } .show { max-height: 250px; } .hide { max-height: 0px; } .title article { padding: 20px; } .skill-icons > img { padding: 20px; height:30%; width:30%; } } /* @media only screen and (min-width: 768px) { nav ul { display: block !important; } } */

 <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel = "stylesheet" type ="text/css" href = "nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <nav class = "navigationBar"> <img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon"> <ul class = "linkBar"> <li><a href = "#"><i class="fa fa-home"></i> Home</a></li> <li><a href = "#"><i class="fa fa-star" aria-hidden="true"></i> Skills</li> <li><a href = "#"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li> <li><a href = "#"><i class="fa fa-user" aria-hidden="true"></i> About</a></li> <li><a href = "#"><i class="fa fa-briefcase" aria-hidden="true"></i> Services</a></li> <li><a href = "#">Miscellaneous</a></li> </ul> </nav> <section class = "title"> <img src = "me.jpg" class = "me"> <h1 class = "top-name"></h1> <h2 class = "top-subtitle">Student - Web Developer - Tutor/Educator</h2> </section> <section class = "skills"> <h1 class = "head-title">Skills</h1> <div class = "skill-icons"> <img src = "bigicons/java.png" id = "java"> <img src = "bigicons/c.png"> <img src = "bigicons/html.png"> <img src = "bigicons/js.png"> <img src = "bigicons/css.png"> <img src = "bigicons/git.png"> </div> <div class = "modal" id = "modal"> <div class = "modal-content" id = "lol"> <span class="close">&times;</span> <p>This is a Modal</p> </div> </div> </section> <section class = "about"> <h1 class = "head-title">About</h1> </section> <section class = "contact"> <article> Interested in collaborating or just want to get to know me more? Lucky for you, there are several ways you can reach out to me. </article> <article> </article> </section> <script> $('.menuIcon').on('click', function() { $('nav ul').toggleClass('show'); }); $(function() { $(document).on("mousewheel", function() { $('nav ul').toggleClass('hide'); }); }); var modal = document.getElementById('modal'); var jBtn = document.getElementById('java'); var span = document.getElementsByClassName("close")[0]; jBtn.onclick = function() { modal.style.display = "block"; } span.onclick = function () { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>

滚动时如何使导航栏消失？

问题描述

1 个解决方案

解决方案1
1 2018-01-21 21:53:30

滚动时如何使导航栏消失？

问题描述

1 个解决方案

解决方案1 1 2018-01-21 21:53:30

解决方案1
1 2018-01-21 21:53:30