Javascript 阻止段落通过CSS中的某个点

目前，我正在开发一个包含JavaScript动画的网站。页面第一部分的图像应该是响应性的，目前可以按预期工作，但我希望下一部分的段落停留在某个地方/不经过某个地方

我曾尝试在CSS中使用溢出函数，但它允许段落的文本通过该点

上图显示了段落文本。我不想让它变成黑色。我将如何做这件事（html、css和js的新手）。注意JavaScript使用的是TweenMax

此处演示：

HTML:

JavaScript:

const backgroundimage = document.querySelector(".backgroundimage");
const slider = document.querySelector(".slider");
const headline = document.querySelector(".headline");

const tl = new TimelineMax();

tl.fromTo
(backgroundimage, 
0.8, {height: "0%"},
{ height: "80%", ease: Power2.easeInOut})

.fromTo
(backgroundimage,
0.8, {width: '100%'}, {width: '80%', ease: Power2.easeInOut})

.fromTo(
    slider,
    0.8,
    { x: "-100%" },
    { x: "0%", ease:Power2.easeInOut },
    "=0.8"
);

---

您应该从

.slider

元素中删除

min height:900px

规则，因为在较小的高度上，它强制滑块的高度（黑色背景）大于标题容器的高度，因此它与下面的段落重叠。

是否希望在某个点后剪切/停止文本？你能解释一下为什么溢出功能不适合你吗？我希望段落的文本停止向上移动超过黑色背景。我尝试了溢出功能，目前的问题是div与黑色背景重叠。在我看来，黑色背景滑块似乎在移动，而不是文本。这很可能是由滑块中的“位置：绝对”引起的将位置更改为绝对解决了移动问题，但现在黑色背景滑块不再位于图像后面这将段落保留在白色部分内，但这也允许段落在图像下方移动。是否有固定方法阻止段落和节在图像下方移动。您应该删除

max height

和

min height

，并将

height:100vh

添加到

section

元素中。这样，所有内容都将包含在黑色部分，段落将位于其下方。以下是更改的小提琴：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
   
    
}

.slider{
    flex: 0 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:black;
    z-index: -1;
    max-width: 100%;
    min-width: 350px;
    min-height: 900px;    
    }

nav {
    display: grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    min-height: 10vh;
    color: white;
    max-width: 100vw;
    
}
#Logo{
grid-column: 2/3;
    font-size: 14px;
}


section {
    display: flex;
    height: auto;
    width: auto;
    max-height: 80vh;
    max-width: 80vw;
    min-height: 75vh;
    min-width: 75vw;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
     
}
.backgroundimage {
    height: 80%;
    width:100%;
    position:relative;
    min-width: 200px;
    
}  
.backgroundimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 200px;

    
    
}
.headline {
    position:absolute;
    top: 80%;
    left:10%;
    font-size: 7vw;
    transform: translate(-20%, -70%);
    color: pink;
    z-index:5;
    
    

}
.backgroundimage::after{
    content: "";
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0.6;
    top: 0;
}

#container {
    max-height: 95vh;
    max-width: 100%;
    
    
    }
.about.lead{
    text-align: center;
    padding-left: 13rem;
    padding-left: 11rem;
    padding-left: 10vw;
    padding-right: 10vw;
    z-index: -2;

}
p.lead {
    font-family: "Lora", serif;
    font-size:calc(10px + 1.2vw);
    line-height: 1.8;
    color: #888888;
    text-align: center;
    margin-left: 25vw;
   margin-right: 25vw;
  
   overflow:hidden;
   z-index: -2;
   

   
}
.about {
    height: 100%;
    
    margin-top: 30vh;
    max-height: 80vh;
    max-width: 100%;
    text-align: center;
    overflow:hidden;
    width: auto;
    height: 500px;
    z-index: -10;

}

h2 {
    font-family: "Lora", serif; 
    text-decoration: bold;
    color: rgb(255, 42, 95);
    margin-right: -30px;
    margin-left: -30px;
}
.lead {
    min-height: 150px;
    font-size: min(1em, 12px);
}

const backgroundimage = document.querySelector(".backgroundimage");
const slider = document.querySelector(".slider");
const headline = document.querySelector(".headline");

const tl = new TimelineMax();

tl.fromTo
(backgroundimage, 
0.8, {height: "0%"},
{ height: "80%", ease: Power2.easeInOut})

.fromTo
(backgroundimage,
0.8, {width: '100%'}, {width: '80%', ease: Power2.easeInOut})

.fromTo(
    slider,
    0.8,
    { x: "-100%" },
    { x: "0%", ease:Power2.easeInOut },
    "=0.8"
);