如何使底部導航欄粘貼到頂部導航欄？

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/> 

Answer 2

這是我發現的一種解決方案。

刪除您的margin-top：63px的.second-fixed-menu並添加：

position: fixed;
top: 63px;
left: 0px;