如何在页面顶部固定多个滚动固定标题/导航栏? [英] How can I make multiple on scroll fixed headers/navbars that stick at the very top of the page?

问题描述

有人知道如何在滚动固定标头上设置多个吗?我已经检查了诸如此之类的答案.. >

这是我想要的，但是我希望该标头在另一个标头之前停止，并且当第一个标头滚动到第二个标头之后时，应取代第一个标头的位置，并停留在屏幕的顶部.但是它们对我不起作用，因为它们使用的是我不使用的库(jQuery等)，并且它们过于复杂.我试过这样做，我只使用2个标头就可以与getBoundingClientRect()一起使用.我在此处提供了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> 

解决方案

演示:

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

说明:

带有正确标记的

position: sticky将完成工作

PS:我知道已经有一个使用position: sticky的答案，但是在该解决方案中，上一个标头不会停止，而是与下一个标头重叠.在我的解决方案中，是在下一次粘贴之前停止.

Does anyone know how to make multiple on scroll fixed headers? I've checked answers such as this.

It's kind of what I want, but I want that header to stop before another header and when the first header gets scrolled past the second header should be taking the first header's place and stick at the very top of the screen. But they don't work for me because they're using libraries that I'm not working with(jQuery, etc.) and they are overly, overly complicated. I've tried to do this, I got it to work with getBoundingClientRect() with only 2 headers. I've provided the HTML&CSS part here:

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>

解决方案

Demo:

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

Explanation:

position: sticky with correct markup will do the work

PS: I know there is already an answer using position: sticky but in that solution the previous header doesn't stop but overlaps with the next one. In my solution is stops before the next sticking.

这篇关于如何在页面顶部固定多个滚动固定标题/导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！