Jquery 合并导航栏固定顶部和导航栏静态顶部

我在这里发现了类似的问题，但不是这一点

我有一个非常宽的网站，所以当我使用navbar静态顶部时，它不会覆盖整个宽度，当我使用navbar固定顶部时，它在打开时不会向下推内容

我能把两个选项都放在一个里面吗？这意味着一个固定的导航条可以向下推动内容

<div id="collapseMenu" class="navbar navbar-inverse navbar-right navbar-fixed-top">
      <div class="container">
        <a href="#Home" class="navbar-brand img-responsive img-circle"><img src="Images/C SHARK-white-150x199.png" alt="C SHARK" class="img-size" /></a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navbarHeaderCollapse ">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#Home"> <span class="glyphicon glyphicon-home"></span> Home</a></li>              
            <li><a href="#AboutUs"> <span class="glyphicon glyphicon-info-sign"></span> About Us</a></li> 
            <li><a href="#OurWork"> <span class="glyphicon glyphicon-wrench"></span> Our Work</a></li>            
            <li><a href="#Technologies"> <span class="glyphicon glyphicon-phone"></span> Technologies</a></li>
            <li><a href="#ContactUs"> <span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>            
          </ul>
        </div>
      </div>
    </div> 

恐怕不行。一个

fixed

元素被移出流，因此不能以任何方式向下推内容。但是，如果您关心的只是

navbar static top

上navbar的宽度，请尝试从元素中删除

navbar right

类

<div id="collapseMenu" class="navbar navbar-inverse  navbar-static-top">
  <div class="container">
    <a href="#Home" class="navbar-brand img-responsive img-circle"><img src="Images/C SHARK-white-150x199.png" alt="C SHARK" class="img-size" /></a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navbarHeaderCollapse ">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#Home"> <span class="glyphicon glyphicon-home"></span> Home</a></li>              
        <li><a href="#AboutUs"> <span class="glyphicon glyphicon-info-sign"></span> About Us</a></li> 
        <li><a href="#OurWork"> <span class="glyphicon glyphicon-wrench"></span> Our Work</a></li>            
        <li><a href="#Technologies"> <span class="glyphicon glyphicon-phone"></span> Technologies</a></li>
        <li><a href="#ContactUs"> <span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>            
      </ul>
    </div>
  </div>
</div> 

---

您可以使用jQuery在调整大小时检测导航栏的高度，然后调整顶部填充。我对您的问题读得不够好。忽略评论。这是一个静态导航栏，它占据了整个宽度。这可能是因为你的导航栏上有奇怪的类。导航栏在你的导航栏上做什么？它只适用于儿童。我删除了导航栏的权利，这没有关系，请参阅完整的例子不幸的是，这没有工作，它被卡在页面的左侧，注意，我有一个500%的引导容器流体的网站，分为5 20%行。因此，当我向右滚动导航栏时，导航栏位于起始点mhmm的左侧，我认为最好在引导过程中重现问题。在这种情况下，如果看不到完整的代码，很难帮助您。我在这里创建了它，虽然滑动动画不起作用，但现在您可以了解到，宽500%的容器，包含5个20%的列，并在它们之间水平滑动，这样做的目的是将菜单粘贴到顶部，并且在窄视图中切换时向下推内容。如果你切换到渲染视图，你可以看到它被卡住了，但整个宽度都被拉伸了，我希望它固定在20%并随视图移动，如果你将静态更改为固定，你会看到，但下推选项不再存在……你希望其他内容在窄（移动）视图上仍然是500%宽度吗，还是将内容垂直堆叠在那里？在窄视图中，每个部分内的内容将垂直堆叠，但这些部分本身仍然是水平的，因此当我按下菜单按钮时，它将水平向左或向右滑动到下一个视图（这已经完成）