javascript - 如何让我的底部导航栏粘在我的顶部导航栏上？

Question

我有两个导航栏。当用户向下滚动时，顶部导航栏会粘在页面顶部。当用户登录时，底部导航栏变为可见。但是底部导航栏不粘，向下滚动时会消失。向下滚动时如何使底部导航栏粘在顶部导航栏上？

https://jsfiddle.net/Lance_Bitner/qqsx00sv/2/

.second_fixed_menu {
 border-color: rgba(91, 172, 220, 0.95);
 margin-top: 63px;
  }

.second_fixed_menu .sub_menu {
 float: right;
 }

Answer 1

您可以将 position: fixed 添加到栏中:

.second_fixed_menu .sub_menu {
  position: fixed; /* add position fixed */
  width: 100%; /* set width to 100%*/
  text-align: right; /*add text align right*/
  /* float: right */ /*no need anymore this one */
}

.navbar.innerpage {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 10vh;
  background-color: #1c5c82;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}
.res_title {
  font-size: 35px;
  font-weight: bold;
  margin: 0;
}
.second_fixed_menu {
  /*background-color: rgba(91, 172, 220, 0.95);*/
  border-color: rgba(91, 172, 220, 0.95);
  /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
  margin-top: 63px;
}
.second_fixed_menu .sub_menu {
  position: fixed;
  width: 100%;
  text-align: right;
}
.res_title {
  font-size: 35px;
  font-weight: bold;
  margin: 0;
}
.second_fixed_menu .sub_menu a {
  color: #fff;
  color: #1c5c82;
  display: inline-block;
  font-weight: bold;
  padding: 0 16px;
  font-family: Assistant, sans-serif;
  font-size: 16px;
}
.sub_menu a.current {
  color: #0d2839;
}
.second_fixed_menu .sub_menu a:hover {
  /*   background: #e2e2e2 none repeat scroll 0 0;*/
  color: #2884ba;
}
.navbar.innerpage {
  height: 60px;
}

<div class="site-content">

  <div class="innerpage navbar w-nav" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="400">

    <div class="w-container">

      <a class="brand w-nav-brand" href="">
        <img class="logo" src="">
      </a>

      <nav class="nav-menu w-nav-menu" role="navigation"><a class="nav-link w-nav-link" href="index.html" style="max-width: 940px;">Home</a>
        <a class="nav-link w-nav-link" href="orientations.html" style="max-width: 940px;">Orientations</a>
        <a class="nav-link w-nav-link" href="profiles.html" style="max-width: 940px;">Profiles</a>
        <a class="nav-link w-nav-link " href="assessment.php" style="max-width: 940px;">Assessment</a>
        <a class="nav-link w-nav-link " href="join.html" style="max-width: 940px;">Join</a>
        <a class="nav-link w-nav-link" href="login.php" style="max-width: 940px;">Login</a>
      </nav>

      <div class="w-nav-button">

        <div class="menu-icon w-icon-nav-menu"></div>

      </div>

    </div>

    <div class="w-nav-overlay" data-wf-ignore=""></div>

  </div>


  <div class="second_fixed_menu">



    <div class="w-container">



      <div class="sub_menu">



        <a href="result.php" class="current">RESULT</a>

        <a href="my_profile.php">USER PROFILE</a>

        <a href="http://198.1.111.21/~wwwlancebitner/demo1/blog/">BLOG</a>

        <a href="inform_research.php">INFORM RESEARCH</a>

        <a href="">LINK</a>



      </div>



    </div>





  </div>

  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>