英文:
How do I make a div stick to the top of the page?
问题
我有一个包含三个SVG文件的div，它们叠加在一起，应该位于页面中心。当用户向下滚动页面时，我希望SVG文件会固定在顶部并保持在那里。
正如你在CSS中所看到的，我尝试使用position: sticky;和top: 0;，但我认为这会导致一个“BUG”，因为SVG文件使用了position: relative;进行叠加。图形现在不再居中，并且在滚动时不会保持在页面顶部。有人可以帮忙吗？提前感谢。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky-Graphic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="one">
<div class="graphic">
<div class="child">
<img src="SVG/triangle.svg" class="triangle" width="150px" />
<img src="SVG/circle.svg" class="circle" width="150px" />
<img src="SVG/rectangle.svg" class="rectangle" width="150px" />
</div>
</div>
</section>
<section class="two">
</section>
<section class="three">
</section>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.graphic {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: relative;
}
.child {
position: sticky;
top: 0;
}
.triangle, .circle, .rectangle {
position: absolute;
}
section {
height: 100vh;
}
.one {
background: rgb(72, 72, 171);
}
.two {
background: pink;
}
.three {
background: orange;
}
英文:
I have a div that contains three SVG files that are layered on top of each other and supposed to be located on the center of the page. When the user scrolls down the page I want the SVG files to stick to the top and remain there.
As you can see in the CSS I have tried using position: sticky; and top:0; However I believe this is causing a "BUG" since the SVG files are layered using position: relative;. The graphic is now uncentered and it does not remain stuck to the top of the page on scroll. Can anyone help? Thanks in advance.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky-Graphic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="one">
<div class="graphic">
<div class="child">
<img src="SVG/triangle.svg" class="triangle" width="150px" />
<img src="SVG/circle.svg" class="circle" width="150px" />
<img src="SVG/rectangle.svg" class="rectangle" width="150px" />
</div>
</div>
</section>
<section class="two">
</section>
<section class="three">
</section>
</body>
</html>type here
CSS
* {
margin: 0;
padding:0;
box-sizing: border-box;
}
.graphic {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: relative;
}
.child {
position: sticky;
top:0;
}
.triangle, .circle, .rectangle {
position: absolute;
}
section {
height: 100vh;
}
.one {
background: rgb(72, 72, 171);
}
.two {
background: pink;
}
.three {
background: orange;
}
答案1
得分: 1
粘性元素只在其父元素内部粘附。所以如果你希望一个粘性元素在整个文档中可见，它需要在顶层，即body元素的子元素。
这个片段演示了这个概念。请注意，图片/图形是body元素的子元素，它们没有被包装在任何部分或div中。我使用的是位图图像而不是SVG图形，但在SVG中同样适用。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root {
--image-size: min(20vw, 150px);
--image-padding: calc((100vh - var(--image-size)) / 2);
}
body {
margin: 0;
background: indigo;
padding-top: var(--image-padding);
text-align: center;
}
img {
border: 2px solid white;
width: var(--image-size);
position: sticky;
top: 0;
}
section {
padding: 1px 0;
text-align: left;
height: 100vh;
}
.s1 {
margin-top: var(--image-padding);
background: cyan;
}
.s2 {
background: yellow;
}
<!-- language: lang-html -->
<img src="https://picsum.photos/id/136/200">
<img src="https://picsum.photos/id/137/200">
<img src="https://picsum.photos/id/139/200">
<section class="s1"></section>
<section class="s2"></section>
<!-- end snippet -->
英文:
Sticky items are only sticky within their parent element. So if you want a sticky element to be visible throughout the entire document, it needs to be at the top level — a child of the body element.
This snippet demonstrates the idea. Note that the images/graphics are children of the body element, they are not wrapped in any sections or divs. I have used raster images rather than SVG graphics, but it will work the same with SVGs.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root {
--image-size: min(20vw, 150px);
--image-padding: calc((100vh - var(--image-size)) / 2);
}
body {
margin: 0;
background: indigo;
padding-top: var(--image-padding);
text-align: center;
}
img {
border: 2px solid white;
width: var(--image-size);
position: sticky;
top: 0;
}
section {
padding: 1px 0;
text-align: left;
height: 100vh;
}
.s1 {
margin-top: var(--image-padding);
background: cyan;
}
.s2 {
background: yellow;
}
<!-- language: lang-html -->
<img src="https://picsum.photos/id/136/200">
<img src="https://picsum.photos/id/137/200">
<img src="https://picsum.photos/id/139/200">
<section class="s1"></section>
<section class="s2"></section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论