2016-07-25 84 views
0

我需要在我的网站2个资产净值:一个固定的,其他的就点击显示隐藏。当我点击显示第一个导航,它不能在第二个导航上方,我做到了。但是,当滚动和我点击显示第一个导航,我不能得到它的固定,并没有工作的位置:固定。不能使引导倒塌NAV固定

我使用的是引导崩溃(http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

我只需要第一的资产净值是固定时滚动。

观测数据:对不起,如果我的英文不是很好= P

https://jsfiddle.net/8o8hr8qb/1/

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

回答

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

+0

太谢谢你了!那就是我需要的! –

0

使用JavaScript捕捉事件滚动设置第一NAV定势,但我认为它很好的解决。 应设置第二个第一NAV中,如:

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

这里的问题很清楚的了解。尽我所知,你想要这样的东西。 请尝试点击按钮以及滚动页面。 让我知道在评论中,如果你不能在代码中解释,究竟应该发生什么或共享屏幕截图或设计。


在这里,我创建了一个类fixed'and added位置:固定的div。以便菜单始终可用。

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

+0

非常感谢! –

+0

@TalitaKorb做到了吗?如果是,那么你应该标记适当的答案并关闭它。 –

+0

是的! =)谢谢! –