Jquery 如何强制导航栏固定顶部在一定高度后显示_Jquery_Html_Css_Twitter Bootstrap

Jquery 如何强制导航栏固定顶部在一定高度后显示

jquery html css twitter-bootstrap

Jquery 如何强制导航栏固定顶部在一定高度后显示,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我正在通过phpinclude调用template.php页面。我在index.php页面和html页面中有一个引导导航栏。执行tepmlate.phpnavbar时，会在index.phpnavbar上显示我想在index.phpnavbar下面显示template.phpnavbar，也就是说，我想在index.phpnavbar下面显示整个html文件，下面是html代码： template.php <header id="navigation"> <div c

我正在通过

php

include

调用

template.php

页面。我在

index.php

页面和html页面中有一个引导导航栏。执行

tepmlate.php

navbar时，会在

index.php

navbar上显示

我想在

index.php

navbar下面显示

template.php

navbar，也就是说，我想在

index.php

navbar下面显示整个html文件，下面是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">....

是否有任何jquery函数来修复此问题或任何css更改？

您只需将

top:44px

添加到

template.php

导航栏中即可

.editbar{
最小高度：44px；/*覆盖最小高度50px*/
高度：44px；
}
.模板导航{
顶部：44px；
}
template.php
index.php

您只需将

top:44px

添加到

template.php

导航栏中即可

.editbar{
最小高度：44px；/*覆盖最小高度50px*/
高度：44px；
}
.模板导航{
顶部：44px；
}
template.php
index.php

使用

页边距顶部：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>

使用

边距顶部：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>

您需要在

编辑栏中添加一个与index.php
导航栏高度相等的top
样式。因此，如果它的高度为50px，则需要将top:50px
添加到editbar
。它必须相反。。我的意思是，editbar
应该首先出现，然后在template.php
内容的下面出现。所以你可以做相反的事情。Editbar的高度为44px
，因此您需要将top:44px
添加到template.php
navbar中。这没有帮助..：（我试过了。有jquery函数吗？请看我发布的答案和它的例子。我想它会帮助你。你需要在editbar
中添加一个top
样式，这个样式等于index.php
navbar的高度。因此，如果它的高度是50px，你需要在editbar中添加top:50px
ode>。它必须是相反的..我的意思是editbar
应该首先出现，然后在模板下面。php
内容应该出现。所以你可以做相反的事情。editbar的高度是44px
，所以你需要将top:44px
添加到template.php导航栏中。这没有帮助..：（我试过了。有jquery函数吗？请看我发布的答案和它的例子。我想它会帮你的。
.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>

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

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