Здравствуйте! Задача следующая: есть блок (в примере - table), в границах которого элемент (в примере - control-el) должен прилипать снизу. Задача в рамках верстки моб.версии сайта, соответственно, необходимо, чтобы элемент при скролле страницы прилипал к нижней части блока table до тех пор пока тот не закончится.
Прошу помочь с реализацией, мои попытки успехом не увенчались :(
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
.wrapper {
width: 320px;
margin: 0 auto;
background: rgba(0,174,239,.4);
}
.header,
.footer {
min-height: 80px;
background: rgba(255,255,255,.3);
line-height: 80px;
text-align: center;
font-weight: bold;
font-size: 40px;
color: #fff;
}
.body {
min-height: 2500px;
}
.control-el {
position: fixed;
bottom: 0;
width: 320px;
height: 30px;
line-height: 30px;
text-align: center;
background: rgba(251,0,0,.5);
color: #fff;
}
.table {
height: 2000px;
line-height: 2000px;
text-align: center;
background: #fffbd3;
font-weight: bold;
font-size: 40px;
color: rgba(251,0,0,.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">Header</div>
<div class="body">
<div class="control-el">
Control elements
</div>
<div class="table">Table data</div>
</div>
<div class="footer">Footer</div>
</div>