Как сделать несколько прокручиваемых фиксированных заголовков / панелей навигации, которые придерживаются в самом верху страницы? - PullRequest
Новая
       12

Как сделать несколько прокручиваемых фиксированных заголовков / панелей навигации, которые придерживаются в самом верху страницы?

0 голосов
/ 26 июня 2018

Кто-нибудь знает, как сделать несколько прокручиваемых фиксированных заголовков? Я проверил ответы, такие как это .

Это своего рода то, что я хочу, но я хочу, чтобы этот заголовок останавливался перед другим заголовком, и когда первый заголовок прокручивается за вторым, он должен занимать место первого заголовка и придерживаться в самом верху экрана. Но они не работают для меня, потому что они используют библиотеки, с которыми я не работаю (jQuery и т. Д.), И они слишком, слишком сложны. Я пытался сделать это, я получил его для работы с getBoundingClientRect() только с 2 заголовками. Я предоставил HTML и CSS здесь: 

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:100");

h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;
}

.header {
  width: 100%;
  height: 50px;
}

.header:nth-of-type(1){
   background-color: dodgerblue;
    position: fixed;
}

.header:nth-of-type(2){
   background-color: rebeccapurple;
}

.header:nth-of-type(3){
   background-color: chartreuse;
}

.content {
  width: 100%;
  height: 100%;
  background: linear-gradient(70deg, orange, crimson);
  padding-top: 50px;
    
}
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Демо-версия:

http://jsfiddle.net/4tmcLjq3/3/

Пояснение:

position: sticky с правильной разметкой сделает работу

PS: я знаю, что уже есть ответ, использующий position: sticky, но в этом решении предыдущий заголовок не останавливается, а перекрывается со следующим. По моему решение останавливается до следующего прилипания.

0 голосов
/ 26 июня 2018

Без вашего кода javascript я могу предложить вам использовать position:sticky, который достигает того, что вы хотите.

Подробнее здесь позиция CSS

Это довольно хорошо поддерживается в современных браузерах. Позиция caniuse sticky 

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  position:relative;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:100");

h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;


}

.header {
  width: 100%;
  height: 50px;
  position: sticky;
top: 0px;
}

.header:nth-of-type(1){
   background-color: dodgerblue;

}

.header:nth-of-type(2){
   background-color: rebeccapurple;
}

.header:nth-of-type(3){
   background-color: chartreuse;
}

.content {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(70deg, orange, crimson);
  padding-top: 50px;
    
}
<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>
...