0

Здравствуйте. Есть обычная разметка сайта, с обычными блоками. Ниже есть блок с атрибутом: height: 100%

.block-1 { background: green; }
.block-2 { background: yellow; }
.block-3 { background: blue; }

.block-1, .block-2, .block-3, .footer {
  color: #fff;
  padding: 10px;
}

.footer {
  background: red;
  height: 100%;
}
<div class="block-1">Блок 1</div>
<div class="block-2">Блок 2</div>
<div class="block-3">Блок 3</div>

<div class="footer">
  Блок с высотой 100%
</div>

Вопрос: Каким образом сделать чтобы когда пользователь пролистал все содержимое блоков 1 - 2 - 3, как только дошел до низа последнего блока (block-3). и если он еще начал листать ниже, его плавно перекидывает на блок footer с высотой 100%.

Буду благодарен за информацию.

1
  • правильно ли я понимаю, что как только блок footer появился снизу на экране он тут же должен занять 100% экрана?
    – Zhihar
    29 ноя 2017 в 15:04

1 ответ 1

1

Думаю, что правильно понял... Скажу сразу, что тут пример не работает, не знаю почему, можно его скопировать запустить на компе будет работать. можно еще добавить плавности подъема P.S. Кстати в codepen тоже не работает...

/* захватываем элемент footer*/
var footer = document.querySelector('.footer');
window.onscroll = function() {

  /**/
  /*динамический во время скрола получаем его координаты*/
  var footerCor = footer.getBoundingClientRect().top;
  /*динамический во время скрола получаем height body*/
  var doc = document.body.getBoundingClientRect().height;

  var cor = footerCor - doc;

  /* и тут условие, когда footer появляется в зоне видимости экрана */
  if (cor <= 0 && cor >= -100) {
    /*срабатыевает событие scrollIntoView(top) для footer*/
    footer.scrollIntoView(top);
  }
}
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
}

.block-1 {
  background: green;
}

.block-2 {
  background: yellow;
}

.block-3 {
  background: blue;
}

.block-1,
.block-2,
.block-3,
.footer {
  color: #fff;
  padding: 10px;
}

.block-3 {
  height: 120%;
}

.footer {
  background: red;
  height: 100%;
}
<div class="block-1">Блок 1
</div>
<div class="block-2">Блок 2
</div>
<div class="block-3">
</div>

<div class="footer">
  Блок с высотой 100%
</div>

2
  • все бы отлично. но, если листать обратно вверх - не пускает, снова бросает на .footer
    – iKey
    30 ноя 2017 в 8:18
  • @Денис, я в курсе, по этому и такое условие... Я тебе подал идею, я просто не знаю всех требуемых моментов, а гадать не хочется... Ты, думаю понял в чем именно состоит суть, тут уж дальше думаю разберешься... Просто надо условие написать под свои требования...
    – Air
    30 ноя 2017 в 8:33

Ваш ответ

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

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