Question

我需要在 css 中制作粘性标题。

但是我遇到了一个问题。当我滚动浏览 google chrome 浏览器页面时，粘性部分中的内容会抽搐。这很烦人。移动 1 像素，但引人注目。

我的任务与我在堆栈溢出时发现的本示例中的任务相同。您可能不会立即注意到此错误。

但是，如果您放大元素或查看具有低扩展性的显示器，则可以清楚地看到这一点。这些元素实际上是在跳跃。我希望滚动页面时元素不移动。

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;
    
}

.header-2{
  top: 50px;
}

.header-3{
  top: 100px;
}

<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-2"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-3"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>

滚动时标题中的内容移动

0 个答案: