如何使底部导航栏与顶部导航栏保持一致

How do I make my bottom navbar stick to my top navbar?

本文关键字：导航 顶部 保持一致 何使底      更新时间：2023-09-26

我有两个导航条。当用户向下滚动时，顶部导航条会粘在页面顶部。当用户登录时，底部导航栏将可见。但底部导航条不粘，向下滚动时会消失。向下滚动时，如何使底部导航条与顶部导航条保持一致？

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;
 }

您可以将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/>

这是我找到的一个解决方案。

删除你的页边空白顶部：63px为.第二个固定菜单并添加：

position: fixed;
top: 63px;
left: 0px;
相关文章：