Question

我的网站需要两个导航：一个固定，另一个隐藏点击。当我点击显示第一个导航时，它不能高于第二个导航，我就做了。但滚动时，我点击显示第一个导航，我无法修复它，并且无法正常工作：修复。

我正在使用bootstrap collapse（http://www.w3schools.com/bootstrap/bootstrap_collapse.asp）

我只需要在滚动时修复第一个导航。

Obs：对不起，如果我的英语不完美= P

.panel {
width: 100%;
z-index: 999;
background: #000;
border: none;
border-radius: 0;
color: #fff;
margin-bottom: 0;
top: 0}

.teste-menu {
width: 100%; 
background: #ccc; 
position: fixed; 
z-index: 99; 
top: auto;}

.collapse.menu-visivel {
display: block; 
visibility: visible;}

.btn-info {
float: right;
right: 45px;
border-radius: 0;
background: #000;
border-color: #000;
position: fixed;
z-index: 999;}


<div class="panel panel-default">
  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">This nav need to be fixed</div>
  </div>

  <a data-toggle="collapse" href="#collapse1">
    <button type="button" class="btn btn-info">▲</button>
  </a>
</div>


<div class="panel panel-default teste-menu">
  <div id="collapse1" class="panel-collapse collapse menu-visivel">
    <div class="panel-body">Fixed nav menu</div>
  </div>
</div>

Answer 1

您的固定导航菜单必须位于同一容器内以扩展其高度

<div id="container" class="panel panel-default">

  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">This nav need to be fixed</div>
  </div>

  <a data-toggle="collapse" href="#collapse1">
    <button type="button" class="btn btn-info">▲</button>
  </a>

  <div class="panel panel-default teste-menu">

    <div id="collapse1" class="panel-collapse collapse menu-visivel">
      <div class="panel-body">Fixed nav menu</div>
    </div>

  </div>
</div>

然后你需要修理容器

#container{position: fixed; top:0;height: auto;}

I've updated your jsfiddle

Answer 2

使用Javascript catch事件滚动来设置第一个导航修复，但我认为它很好解决。您应该在第一个导航中设置第二个，如：

    <div class="panel panel-default teste-menu">

  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">This nav need to be fixed</div>
  </div>

  <a data-toggle="collapse" href="#collapse1">
    <button type="button" class="btn btn-info">▲</button>
  </a>
<div class="panel panel-default ">

  <div id="collapse1" class="panel-collapse collapse menu-visivel">
    <div class="panel-body">Fixed nav menu</div>
  </div>

</div>
</div>

Answer 3

这里的问题是清楚的理解。尽我所能，你想要这样的东西。尝试点击按钮以及滚动页面。如果您无法在代码中解释，请在评论中告诉我，究竟应该发生什么或分享屏幕截图或设计。

在这里，我创建了一个div类fixed'and added位置：固定`。这样菜单随时可用。

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
}
.panel {
  width: 100%;
  z-index: 999;
  background: #000!important;
  border: none;
  border-radius: 0;
  color: #fff;
  margin-bottom: 0!important;
  top: 0
}
.teste-menu {
  width: 100%;
  background: #ccc!important;
  z-index: 99;
  top: auto;
}
.collapse.menu-visivel {
  display: block;
  visibility: visible;
}
.btn-info {
  float: right;
  right: 45px;
  border-radius: 0;
  background: #000;
  border-color: #000;
  position: fixed;
  z-index: 999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="fixed">
  <div class="panel panel-default">

    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">This nav need to be fixed</div>
    </div>

    <a data-toggle="collapse" href="#collapse1">
      <button type="button" class="btn btn-info">▲</button>
    </a>

  </div>


  <div class="panel panel-default teste-menu">

    <div id="collapse1" class="panel-collapse collapse menu-visivel">
      <div class="panel-body">Fixed nav menu</div>
    </div>

  </div>

</div>



Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido
pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60,
quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica
e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração
eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus
PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos
de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e
mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na
década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto
para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica
como Aldus PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro
de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem
Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando
um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se
popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

无法使bootstrap折叠导航固定

3 个答案: