Я не могу обойти эту тему: я создаю мобильный webapp с бутстрапом. Так что у меня есть контейнер с навигационной панелью, некоторые дивами и снова пилюлей-нав ниже:Bootstrap - div over div slideup
<div class="container">
<!-- top navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- ... -->
</nav>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active fade in" id="map-panel">
<div id="map"></div>
<div class="container-fluid" id="teaser-container">
<div class="row" id="teaser-slideup-button">
<div class="col-xs-12">
<a role="button" href="#teaser-content">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="row" id="teaser-header">
<div class="col-xs-12">Teaser header</div>
</div>
<div id="teaser-content">
<div class="row">
<div class="col-xs-12">
<div style="height: 160px" />
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<!-- ... -->
</nav>
</div>
То, что я хочу сделать, это позволить # тизера-контейнер скользит по #Map снизу. В основном
$('#teaser-slideup-button').on('click', function (e) {
$('#teaser-container').animate({
'bottom': '0px'
});
});
Некоторые соответствующие CSS:
#teaser-container {
z-index:1000;
position: absolute;
bottom: -100px;
background: #fff;
width: 100%;
display: inline-block;
overflow-y: hidden;
}
#map-panel {
position: absolute;
top: 0px;
overflow-y: hidden;
height: 100%;
width: 100%;
}
Что происходит, хотя, является то, что ДИВ просто появляется и, казалось бы, анимация происходит потом, прокручивая карту DIV вверх. Я создал JSFiddle здесь:
https://jsfiddle.net/jrubisch/hvpjrwrq/
Это не должно быть так трудно, я думаю, но я вроде запутался здесь ... Я был бы рад предоставить более подробную информацию, если это необходимо.
Спасибо!