Анимация прокрутки для временной шкалы работает не очень хорошо ⇐ CSS

[Гость]

У меня есть временная шкала в Codepen, которая использует html и css для создания линии, которая перемещается сверху вниз при прокрутке веб-сайта, только эта линия отображается на всем веб-сайте, а не просто пересекает вторую фиксированную линию.< /p>
Z-index, Hidden-Overflow, ChatGPT, Perplexity и Gemini не смогли помочь мне решить проблему. У вас есть решение или я просто ослеплен кодом?
Ps. Я знаю, что это простое решение с помощью js. но у меня нет никаких знаний в этом вопросе.

Код: Выделить всё

2022





Der Start zu deinem Podcast-Launch. Ein Tag, Vollgas Strategie- und Umsetzungsarbeit. Resultat ist das Konzept welches den Rahmen für deinen Podcast darstellen wird.




2023



l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. Donec sodales dolor ac mauris luctus vestibulum. Quisque tincidunt mi vitae quam fringilla interdum. Nulla facilisi. Sed non lectus at libero pharetra malesuada.




2024



l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. Donec sodales dolor ac mauris luctus vestibulum.




2024






Work on the Robin Voice platform with the goal of releasing it by the end of the year




2025






l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero. Donec sodales dolor ac mauris luctus vestibulum.




2026






l"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec pretium libero.







body {
background: #000;

}

.container-frontend-italia {
height:150px;
z-index: 10;
position: relative;
display: block;
background:#000;
}

.timeline {
z-index: 0;
position: relative;
}

.timeline-container {
width: 100%;
min-height: 100vh;
}

.w-container {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.w-container:before, .w-container:after {
content: "  ";
grid-area: 1 / 1 / 2 / 2;
display: table;
}

.w-container:after {
clear: both;
}

.w-container .w-row {
margin-left: -10px;
margin-right: -10px;
}

.timeline-wrapper {
flex-direction: column;
justify-content: flex-start;
align-items: center;
display: flex;

}

.timeline-progress {
z-index: -9!important;
width: 3px;
height: 100%;
background-color: #414141;
position: absolute;
overflow: hidden;
}

.timeline-progress-bar {
width: 3px;
height: 50vh;
background-color:#c4ff29!important;
padding: 0;
bottom: 50vh;
position: absolute;

}

.w-layout-grid {
grid-row-gap: 16px;
grid-column-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}

.timeline-item {
width: 100%;
max-width: 1280px;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-rows: auto;
grid-template-columns: 1fr 160px 1fr;
margin-left: auto;
margin-right: auto;
padding: 80px 15px;
}

.timeline-left {
text-align: right;
}

.timeline-date-text {
font-size: 33px;
line-height: 1.2;
position: -webkit-sticky;
position: sticky;
top: 50vh
font-family: "bffutura;"
}

.timeline-center {
text-align: left;
justify-content: center;
display: flex;
}

.timeline-right {
font-weight: 500;
}

.timeline-circle {
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 100%;
position: -webkit-sticky;
position: sticky;
top: 50vh;
}

.timeline-text {
font-family: "inter";
font-size: var(--size-p);
line-height: 26px;
letter-spacing: var(--spacing-letter);
font-weight: 500;
width: 90%;
}

.text  {
animation: fade linear both;
animation-timeline: view(block);
animation-range: contain 20% cover 50%;
}

@keyframes fade {
0% {
opacity: 0.6;
color: #999999;
}
100% {
opacity: 1;
color: #FFFFFF;
}
}

@media screen and (max-width: 991px) {
.w-container {
max-width: 728px;
}
}

@media screen and (max-width: 467px) {

.w-row, .w-container .w-row {
margin-left: 0;
margin-right: 0;
}

}

@media screen and (max-width: 479px) {

.timeline-text {
font-size: var(--read-text-mobile);
}

}

@media screen and (min-width: 1440px) {

.timeline {
position: relative;
}

.timeline-container {
overflow: visible;
}

.timeline-wrapper {
flex-direction: column;
align-items: center;
display: flex;
}

.timeline-item {
width: 100%;
max-width: 1280px;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-rows: auto;
grid-template-columns: 1fr 160px 1fr;
margin-left: auto;
margin-right: auto;
padding: 80px 0;
}

.timeline-left {
text-align: right;
}

.timeline-center {
justify-content: center;
display: flex;
}

.timeline-right {
letter-spacing: var(--spacing-letter);
}

.timeline-date-text {
font-size: 33px;
position: -webkit-sticky;
position: sticky;
top: 50vh;
}

.timeline-circle {
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 100%;
padding: 0;
font-size: 16px;
position: -webkit-sticky;
position: sticky;
top: 50vh;
}

.timeline-text {
font-family: "inter";
font-size: var(--size-p);
line-height: 26px;
letter-spacing: var(--spacing-letter);
font-weight: 500;
width: 90%;
}

.timeline-progress {
z-index: -3;
width:  3px;
height: 100%;
background-color: #414141;
position: absolute;

}

.timeline-progress-bar {
width: 3px;
height: 50vh;
background-color:#009dbe;
position: absolute;
/* display: none; */
bottom: 50vh;
/* top: 50vh;  */
}

}

@media screen and (max-width: 991px) {

.container {
padding: 80px 50px 80px 60px;
}

}

@media screen and (max-width: 769px) {

.timeline {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 37px;
padding-right: 37px;
}

.timeline-item {
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
grid-template-rows: 1fr 64px;
grid-template-columns: minmax(64px, 1fr);
grid-auto-columns: 1fr;
grid-auto-flow: row;
align-content: stretch;
justify-content: stretch;
justify-items: start;
padding: 80px 0 15px;
display: grid;
}

.timeline-item.row-rmv {
grid-template-rows: 1fr;
}

.timeline-center {
flex-direction: row;
justify-content: center;
align-items: stretch;
display: flex;
position: absolute;
left: 10px;
}

.timeline-right {
font-size: 16px;
font-weight: 500;
}

.timeline-date-text {
margin-bottom: 10px;
font-size: 33px;
}

.timeline-text {
font-size: var(--read-text-mobile);
}

.timeline-progress {
left: 16px;
}

}

}

@media screen and (max-width: 469px) {

.container {
background-color: rgba(0, 0, 0, 0);
padding: 25px 10px 16px 11px;
}

.container.no-vertical-padding {
padding-top: 2px;
}

.timeline {
padding-left: 28px;
padding-right: 15px;
}

.timeline-item {
padding-top: 90px;
padding-bottom: 90px;
}

.timeline-text {
font-size: var(--read-text-mobile);
}

.timeline-date-text {
margin-bottom: 10px;
font-size: 26px;
}

.timeline-item.row-rmv {
grid-template-rows: 1fr;
padding-top: 70px;
padding-bottom: 70px;
}

.timeline-center {
left: 6px;
}

.timeline-progress {
left: 11px;
}

}

Источник: https://stackoverflow.com/questions/781 ... -work-well