Блог

Главная - Вопросы по программированию - Дочерний элемент с фиксированной позицией, переполнение скрытого родителя. Скрытие только нижнего

Дочерний элемент с фиксированной позицией, переполнение скрытого родителя. Скрытие только нижнего

#html #css

#HTML #css

Вопрос:

Я хотел бы разместить ряд фиксированных элементов в одном и том же положении на странице и сделать их видимыми при прокрутке их родителей в поле зрения.

Пока у меня есть это: https://codepen.io/porgeet/pen/ywZgyq

 .parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}  
 <div class="main">
  <div class="parent one">
    <div class="child">One</div>
  </div>
  <div class="parent two">
    <div class="child">Two</div>
  </div>
  <div class="parent three">
    <div class="child">Three</div>
  </div>
</div>

Проблема

Кажется, что переполненный родительский элемент влияет только на divs, которые следуют за ним, а не предшествуют.

Я стремлюсь показать один, затем два, затем три.

Любая помощь была бы высоко оценена.

Ответ №1:

overflow:hidden в вашем случае ничего не сделает, потому что вы сделали элементы фиксированными1. То, с чем вы столкнулись, является логическим результатом порядка рисования, поскольку вы ничего не указали, z-index поэтому второй position:relative элемент будет нарисован выше первого position:fixed и так далее, поэтому второй фон скроет первый заголовок и так далее.

С position:fixed вы не сможете достичь этого, потому что ваш код почти эквивалентен приведенному ниже, где больше нет связи между родительским элементом и дочерним элементом.

 .parent,
.child{
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  text-align:center;
  overflow: hidden;
  width:100%;
}

.one {
  background: pink;
}
.one   .child {  
color: green;
}

.two {
  background: aquamarine;
}
.two   .child {
  color: blue;
 }

.three {
  background: pink;
}
.three   .child {
  color: red;
}
.child {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}  
 <div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>

Я думаю, что ваш единственный способ достичь необходимого эффекта — рассмотреть некоторые JS. Вот более простая идея, которую вы можете position:absolute использовать overflow:hidden :

 window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--t', scroll "px");
}  
 .parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top:var(--t,0);
}

.two .child {
  top: calc(50% - 100vh);
}

.three .child {
  top: calc(50% - 200vh);
}  
 <div class="parent one">
  <div class="child">One</div>
</div>
<div class="parent two">
  <div class="child">Two</div>
</div>
<div class="parent three">
  <div class="child">Three</div>
</div>

Хитрость заключается в том, чтобы отрегулировать поля с помощью прокрутки окна, чтобы переместить все элементы одинаково, и изначально мы расположим их в одной позиции на экране, вот почему я добавил 100vh и 200vh для перемещения элемента вверх.

Мы также можем настроить перевод:

 window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--t', scroll "px");
}  
 .parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50%   var(--t,0px)));
}

.two .child {
  top: calc(50% - 100vh);
}

.three .child {
  top: calc(50% - 200vh);
}

body {
 margin:0;
}  
 <div class="parent one">
  <div class="child">One</div>
</div>
<div class="parent two">
  <div class="child">Two</div>
</div>
<div class="parent three">
  <div class="child">Three</div>
</div>

1Это свойство указывает, обрезается ли содержимое элемента блочного контейнера, когда оно переполняет поле элемента. Это влияет на отсечение всего содержимого элемента, за исключением любых элементов-потомков (и их соответствующего содержимого и потомков), содержащим блоком которых является окно просмотра или предок элемента.ссылка

Фиксированное позиционирование — это подкатегория абсолютного позиционирования. Единственное отличие заключается в том, что для блока с фиксированным положением содержащий его блок устанавливается с помощью окна просмотра.ссылка

Комментарии:

1. Конечно, порядок рисования. Вот что меня смущало, я читал, что фиксированная позиция относится к порядку просмотра, но не мог понять вышеупомянутый эффект. Я вижу, что вы продвигаете элементы дальше вниз по мере прокрутки, сохраняя их в том же визуальном положении. -vh изначально выводит их из поля зрения. Спасибо