Липкий нижний колонтитул раскрыть - PullRequest
Новая
       11

Липкий нижний колонтитул раскрыть

2 голосов
/ 14 марта 2019

У меня есть разделы, которые скользят по заголовку.
Но мне нужен последний раздел, чтобы раскрыть нижний колонтитул.

Можно ли обнаружить нижний колонтитул без JavaScript в такой ситуации?

html,
body,
* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  height: 100%;
  margin-top: 300px;
  margin-bottom: 300px;
}

.header {
  height: 100vh;
  background: tomato;
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
}

.section1,
.section2,
.section3 {
  height: 100vh;
  z-index: 10;
  position: relative;
}

.section1 {
  background: orange;
}

.section2 {
  background: purple;
}

.section3 {
  background: red;
}

.footer {
  height: 10vh;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: aquamarine;
}
<div class="container">
  <div class="header">
    header
  </div>

  <div class="section1">
    section 1
  </div>

  <div class="section2">
    section 2
  </div>

  <div class="section3">
    section 3
  </div>
</div>

<div class="footer">
  footer
</div>

Посмотреть на JS Bin

Ответы [ 3 ]

1 голос
/ 14 марта 2019

Причина, по которой ваш нижний колонтитул не отображается, состоит в том, что он имеет более низкий z-индекс, чем в других разделах.Однако, если вы дадите классу .footer более высокий z-индекс, чем в других разделах, он всегда будет отображаться внизу, потому что он имеет стиль position: fixed.

Одним из возможных решений было бы дать нижнему колонтитулу тот же z-индекс, что и для других разделов, изменить его положение на relative и включить его в класс .container.

Это будет выглядеть так: 

html,
body,
* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  height: 100%;
  margin-top: 300px;
  margin-bottom: 300px;
}

.header {
  height: 100vh;
  background: tomato;
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
}

.section1,
.section2,
.section3,
.footer {
  height: 100vh;
  z-index: 10;
  position: relative;
}

.section1 {
  background: orange;
}

.section2 {
  background: purple;
}

.section3 {
  background: red;
}

.footer {
  height: 10vh;
  position: relative;
  bottom: 0;
  width: 100%;
  background: aquamarine;
}
<div class="container">
  <div class="header">
    header
  </div>
  <div class="section1">
    section 1
  </div>
  <div class="section2">
    section 2
  </div>
  <div class="section3">
    section 3
  </div>
  <div class="footer">
    footer
  </div>
</div>

JS Bin

0 голосов
/ 14 марта 2019

Вы можете рассмотреть возможность использования position:sticky.

Липко позиционируемый элемент - это элемент, чья вычисленная позиция ценность липкая. Это рассматривается как относительно позиционируется до содержащий блок пересекает указанный порог (например, установка top значение, отличное от auto) в корне потока (или в контейнере свитки внутри), в этот момент он рассматривается как "застрял" до встречи противоположный край содержащего его блока.

Однако учтите совместимость браузера .
На момент написания этой статьи IE не поддерживает «липкое» позиционирование.

Вот демонстрация: 

body {
  margin: 0;
}

.header {
  position:-webkit-sticky;
  position: sticky;
  background: tomato;
  height: 100vh;
  top: 0;
}

.section1,
.section2,
.section3 {
  height: 100vh;
  position: relative;
}

.section1 {
  background: orange;
}
.section2 {
  background: purple;
}
.section3 {
  background: red;
}

.footer {
  position:relative;
  height: 10vh;
  background: aquamarine;
}
<div class="header">
  header
</div>
<div class="section1">
  section 1
</div>
<div class="section2">
  section 2
</div>
<div class="section3">
  section 3
</div>
<div class="footer">
  footer
</div>
0 голосов
/ 14 марта 2019

Попробуйте поставить: 

z-index: 11;

Поскольку у вас есть z-index в другом контейнере, поэтому вы не можете увидеть нижний колонтитул

...