从绝对位置更改为粘性位置将':after '元素移动到容器底部

Question

首先介绍一下这段代码。这是教育软件的"遗留代码"，有成千上万的页面被这样标记。所以理想情况下，我想找到一个解决方案，而不改变每个页面上的标记-如果可能的话!

我的问题是，有两个图像固定在内容的左边和右边。这很好。但是现在，当用户向下滚动页面时，图像需要保持在粘性位置。

因为使用了:before和:after类。等我换成粘人。:after元件位于容器下方。我知道为什么会发生这种情况，但想知道是否有人能想到一个解决办法?

我已经尝试了浮动左/右与负边距，这适用于:before，但不是:after元素。

我已经将代码添加到这篇文章中，但是CodePen也可能有助于在更宽的窗口中查看，因为左/右元素隐藏在更窄的视口上。这里的布局是正确的。这些项目只需要保持在滚动时的相同位置。

CodePen: https://codepen.io/moy/pen/ExQvWWg

这仍然用于教育软件，所以我对更改为flex有点谨慎，因为我没有使用的浏览器的任何数据。我想过的唯一其他解决方案是将背景图像应用于.container.

body {
background: #29cebe url(../img/interface/body-bg.png) center top;
background-size: 500px 500px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%),
inset 0 -1px 0 rgb(255 255 255 / 32%);
box-sizing: border-box;
color: #282c2e;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
height: calc(100% - 144px);
letter-spacing: 0.024em;
line-height: 1.5;
margin: 0 auto;
position: relative;
top: 72px;
width: 100%;
}
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 800px;
}
.page-head,
.page-foot {
background: black;
color: white;
height: 72px;
position: fixed;
top: 0;
text-align: center;
width: 100%;
z-index: 100;
}
.page-foot {
top: auto;
bottom: 0;
}
.container {
margin: 0 auto;
padding: 32px 0;
position: relative;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
}
.container:before {
background: red;
background-size: 100%;
height: 370px;
top: 64px;
left: -120px;
width: 111px;
}
.container:after {
background: red;
background-size: 100%;
height: 362px;
top: 64px;
right: -112px;
width: 98px;
}
.wrap {
background: white;
box-shadow: inset -4px -4px 0 rgb(0 0 0 / 8%), 4px 4px 0 rgb(0 0 0 / 12%);
border-radius: 12px;
padding: 32px 32px 0;
position: relative;
}

<div class="page">
<header class="page-head">
Header
</header>
<div class="container">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<footer class="page-foot">
Footer
</footer>
</div>

Answer 1

我可以使用JavaScript做到这一点。如果你想要，这里有一个演示。它有时有点粗糙，但通过一些调整，你可以将其转换为弹性效果。

var containerOverrindeStyle = document.createElement("style");
window.onscroll = function (e) {
fromTop(Math.ceil(scrollY));
};
function fromTop(offset){
containerOverrindeStyle.innerHTML = `.container:after,.container:before { top: ${
64 + offset
}px; }`;
document.head.appendChild(containerOverrindeStyle);
}

body {
background: #29cebe url(../img/interface/body-bg.png) center top;
background-size: 500px 500px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%),
inset 0 -1px 0 rgb(255 255 255 / 32%);
box-sizing: border-box;
color: #282c2e;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
height: calc(100% - 144px);
letter-spacing: 0.024em;
line-height: 1.5;
margin: 0 auto;
position: relative;
top: 72px;
width: 100%;
}
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 800px;
}
.page-head,
.page-foot {
background: black;
color: white;
height: 72px;
position: fixed;
top: 0;
text-align: center;
width: 100%;
z-index: 100;
}
.page-foot {
top: auto;
bottom: 0;
}
.container {
margin: 0 auto;
padding: 32px 0;
position: relative;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
}
.container:before {
background: red;
background-size: 100%;
height: 370px;
top: 64px;
left: -120px;
width: 111px;
}
.container:after {
background: red;
background-size: 100%;
height: 362px;
top: 64px;
right: -112px;
width: 98px;
}
.wrap {
background: white;
box-shadow: inset -4px -4px 0 rgb(0 0 0 / 8%), 4px 4px 0 rgb(0 0 0 / 12%);
border-radius: 12px;
padding: 32px 32px 0;
position: relative;
}

<div class="page">
<header class="page-head">
Header
</header>
<div class="container">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<footer class="page-foot">
Footer
</footer>
</div>

Answer 2

或者你可以使用css:全页打开

body {
background: #29cebe url(../img/interface/body-bg.png) center top;
background-size: 500px 500px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%),
inset 0 -1px 0 rgb(255 255 255 / 32%);
box-sizing: border-box;
color: #282c2e;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
height: calc(100% - 144px);
letter-spacing: 0.024em;
line-height: 1.5;
margin: 0 auto;
position: relative;
top: 72px;
width: 100%;
}
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 800px;
}
.page-head,
.page-foot {
background: black;
color: white;
height: 72px;
position: fixed;
top: 0;
text-align: center;
width: 100%;
z-index: 100;
}
.page-foot {
top: auto;
bottom: 0;
}
.container {
margin: 0 auto;
padding: 32px 0;
position: relative;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.container:before,
.container:after {
content: "";
display: block;
position: fixed;
}
.container:before {
background: red;
background-size: 100%;
height: 370px;
top: 175px;
left: -65px;
width: 111px;
}
.container:after {
background: red;
background-size: 100%;
height: 362px;
top: 175px;
right: -35px;
width: 98px;
}
.wrap {
background: white;
box-shadow: inset -4px -4px 0 rgb(0 0 0 / 8%), 4px 4px 0 rgb(0 0 0 / 12%);
border-radius: 12px;
padding: 32px 32px 0;
position: relative;
z-index:2;
}

<div class="page">
<header class="page-head">
Header
</header>
<div class="container">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<footer class="page-foot">
Footer
</footer>
</div>