jquery - 如何强制 navbar-fixed-top 在一定高度后显示

Question

我正在通过 php include 调用一个 template.php 页面。我在 index.php 页面和 html 页面中有一个 Bootstrap 导航栏。在执行 tepmlate.php 时，导航栏显示在 index.php 导航栏之上。

我想在 index.php 导航栏下方显示 template.php 导航栏，即我想在 index.php 下方显示整个 html 文件> 导航栏，html代码如下:

模板.php

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

索引.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 导航栏。

Simple Bootply Example

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