如何強制導航欄固定的頂部在一定高度后顯示

Question

我正在通過php include調用template.php頁面。 我在index.php頁面和html頁面中都有一個引導導航欄。 在執行tepmlate.php導航欄時，將顯示在index.php導航欄上。

我想在index.php導航欄下方顯示template.php導航欄，即我希望整個html文件顯示在index.php導航欄下方，以下是html代碼：

template.php

<header id="navigation">
    <div class="navbar navbar-inverse navbar-fixed-top" role="banner">
        <div class="container">
            <div class="navbar-header" data-nitspagelabel="1">....

index.php

<nav class="navbar navbar-default navbar-fixed-top editbar">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">

CSS文件：

.editbar {
  height: 44px;
  position: fixed;
  width: 100%;
  min-width: 600px;
  box-shadow: 0 0 15px 0 rgba(22, 45, 61, 0.5);
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 100;
  line-height: 48px;
  margin-bottom: 1px;
  transition: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) top;
 }

是否有任何jquery函數來解決此問題或任何CSS更改？

Answer 1

您只需要添加一個top: 44px到template.php navbar。

簡單的引導示例

.editbar {
  min-height: 44px; /* Override min-height of 50px */
  height: 44px;
}
.template-nav {
  top: 44px;
}

<div class="navbar navbar-inverse navbar-fixed-top template-nav" role="banner">
  <div class="container">
    <div class="navbar-header" data-nitspagelabel="1">template.php</div>
  </div>
</div>

<nav class="navbar navbar-default navbar-fixed-top editbar">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">index.php</div>
  </div>
</nav>

Answer 2

使用margin-top: 50作為要顯示在另一條下方的任何條的樣式。 我創建了一個樣本小提琴進行演示。

的HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

<nav class="navbar navbar-default navbar-fixed-top php-bar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName2</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

CSS：

.php-bar {
    margin-top: 50px;
}

JSFIDDLE