1

Есть 3 блока, 2 из них должны быть фиксированы, но фиксированы они должны быть в тот момент, когда находятся по середине экрана (более подробно на схеме)введите сюда описание изображения

Есть главный блок(по центру) и два по бокам, все они выровненный относительно друг друга, нужно что бы при скроле в тот момент, когда 2 блока справа и слева достигали середины они становились фиксированный , а центральный продолжал идти. Делаю сайт на bootstrap'e 4, там есть готовые классы, например class="sticky-top", при использовании которого блок становиться фиксированным когда он находиться в самом верху экрана, до этого он не фиксированный элемент. Нужен такой же функционал, но что бы фиксация была по середине. Проблема такая возникла из за разных размеров экранов. Например если зафиксировать блоки простым position:fixed на широком экране, то все впринципе будет работать, но на ноутбуках фиксированые блоки не скролятся, и половина контента просто за границами окна

2
  • «но на ноутбуках фиксированые блоки не скролятся, и половина контента просто за границами окна» - поясните подробнее этот момент, пожалуйста.
    – yar85
    Commented 21 апр. 2018 в 11:37
  • @yar85 ну я пишу сайт на мониторе 1920х1080 , там весь контент влезает , но на ноутбуках разрешение , высота гораздо меньше , я допустим ставлю position:fixed на 2 соседних блока ( они изначально выравненый по основному блоку , который без данного свойства ) и получаю статистические блоки по бокам и главный контент по центру . При уменьшении высоты экрана главный блок оказывается ниже , а вместе с ним и боковые блоки , я нарисовал на примере рисунок 1 , что происходит , так как у боковых блоков pos:fixed, то они остаться на половину за экраном
    – Vitaly
    Commented 21 апр. 2018 в 11:50

1 ответ 1

2

Основной принцип:

Отслеживаем величину верт. прокрутки страницы в слушателе события scroll.
Проверяем условие верхняя Y-координата блоков + половина высоты меньшего из боковых блоков > половина высоты вьюпорта:

  • Если условие выполняется (прокрутка дошла до целевой высоты), то добавляем боковым блокам класс с position: fixed и top: 50vh, а также задаем им стиль transform: translate(<величина X-скролла страницы>, -50%).

  • Иначе, если условие не выполняется (то есть, "недокрутили" до нужной нам высоты) - убираем у боковых элементов наш класс, и обнуляем стиль transform.

Дело в том что position: fixed делает боковые блоки невосприимчивыми к горизонтальной прокрутке страницы - поэтому, решение на чистом CSS невозможно, и нам необходимо постоянно изменять их translateX средствами JavaScript.


Пример кода ниже.
Так как фрейм результата маленького размера, нажмите "На всю страницу" и поиграйте с размерами окна браузера.

var $d = document, 
    $de = $d.documentElement, 
    leftSb  = $d.getElementById('left'), 
    rightSb = $d.getElementById('right'), 
    article = $d.getElementById('article'); 

window.addEventListener('scroll', () => {
  let bcr = article.getBoundingClientRect(), 
      posY = bcr.top + leftSb.offsetHeight / 2,
      halfH = $de.clientHeight / 2;
  if (posY < halfH) {
    leftSb.classList.add('fixed'); 
    rightSb.classList.add('fixed'); 
    leftSb.style.transform = rightSb.style.transform = `translate(${-$de.scrollLeft}px, -50%)`; 
  } else {
    leftSb.classList.remove('fixed'); 
    rightSb.classList.remove('fixed'); 
    leftSb.style.transform = rightSb.style.transform = null; 
  }
}); 
#content-top { text-align: center; }

.block-top {
  display: inline-block; 
  width: 300px; height: 200px; 
  margin: 10px; 
  background-color: #252; 
}

#content-main {
  position: relative; 
  display: flex; flex-wrap: nowrap; 
  justify-content: space-between; 
  align-items: flex-start; 
  min-width: 680px; 
  border: 1px dashed red; 
}

.side-container { flex: 0 0 200px; min-height: 200px; }

.side-block {
  width: 200px; height: 200px; 
  background-color: #a44; 
}
#right { height: 300px; }
.side-block.fixed { position: fixed; top: 50vh; }

#article {
  flex: 1 0 200px; height: 1500px; 
  margin: 0 10px; padding: 10px; 
  background-color: #44a; color: #fff; 
  font: 30px sans-serif; 
}'
<div id="content-top">
  <div class="block-top"></div><div class="block-top"></div><div class="block-top"></div><div class="block-top"></div><div class="block-top"></div>
</div>

<div id="content-main">
  <div class="side-container">
    <div id="left" class="side-block"></div>
  </div>
  <div id="article" class="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="side-container">
    <div id="right" class="side-block"></div>
  </div>
</div>

Пример я делал на мобилке, поэтому не уверен что на компе он будет отображаться как задумано, и прикладываю ссылку на JSbin-демку.

1
  • 1
    Хороший ответ! (+)
    – Arthur
    Commented 22 апр. 2018 в 6:57

Ваш ответ

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

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