1

Здравствуйте! Задача следующая: есть блок (в примере - 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>

1 ответ 1

1

как то так:

$(window).scroll(function() {
  var table = $(".table").position().top + $(".table").height();
  var x = $("#x").offset().top + $(".control-el").height();
  console.log(table + "--- " + x)
  if (table <= x) {
    $(".control-el").css("position", "absolute");
    $(".control-el").css("top", table);

  } else {
    $(".control-el").css("position", "fixed");
    $(".control-el").css("top", "");
  }
})
* {
  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;
}
#x {
  position: fixed;
  bottom: 0;
  width: 320px;
  height: 30px;
}
.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>
    <span id="x"></span>
    <div class="table">Table data</div>
  </div>
  <div class="footer">Footer</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.