Пытаюсь добавить класс в div при прокрутке, но ничего не происходит ⇐ Javascript

[Anonymous]

Мне бы хотелось, чтобы изображение внутри моего div занимало всю страницу через абсолютную позицию и располагалось сбоку с другим div рядом с ним без абсолютной позиции. Таким образом, когда вы открываете страницу, изображение заполняет весь экран, но при прокрутке оно «сжимается», открывая другой контент. Честно говоря, не знаю, почему он ничего не делает.
Примечание: это сайт в стадии незавершенного производства, так что да, я знаю, что все остальное не работает.

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

window.addEventListener("scroll", function() {
const splashart = document.getElementById("splashart");
// Check if the user has scrolled more than 50 pixels from the top
if (window.scrollY >  50) {
splashart.classList.add("thin");
} else {
splashart.classList.remove("thin");
}
});

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

body {
background-color: #eeeee4;
cursor: url(''), auto;
}

.bg-img {
background-image: url('');
background-size: 15%;
}

.top-banner {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
background-color: white;
}

.banner {
width: fit-content;
background-color: grey;
margin: auto;
}

.banner-title {
text-align: center;
}

.title,
.title:visited,
.title:hover,
.title:active {
text-align: center;
font-size: 10vw;
font-weight: bold;
font-family: "Parisienne", cursive;
text-decoration: none;
color: #c79107;
}

.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.left-nav {
display: flex;
flex-direction: row;
padding: 0.3vw;
}

.right-nav {
display: flex;
flex-direction: row;
padding: 0.3vw;
}

.click-nav,
.click-nav:visited {
margin: 0.3vw;
font-size: 1.5vw;
font-weight: bold;
font-family: "Roboto Mono";
text-decoration: none;
color: #3a3a3a;
transition: color 0.3s;
}

.click-nav:hover {
color: #c79107;
}

.click-nav:active {
color: #3a3a3a;
}

.art-contain {
width: 100vw;
background-color: red
}

.art {
display: flex;
flex-direction: row;
}

.splashart {
position: absolute;
top: 5;
left: 20;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.splashart img {
height: 100%;
width: 100vw;
object-fit: cover;
transition: all linear .5s
}

.splashart.thin {
flex: 5;
justify-content: center;
align-items: center;
overflow: hidden;
}

.splashart.thin img {
height: 100%;
width: 100%;
object-fit: cover
}

.art-right {
flex: 1;
background-color: blue;
}

.overlay-text {
position: sticky;
width: fit-content;
bottom: 5vh;
left: 5vh;
background-color:  purple
}

.overlay-title {}

.overlay-subtitle {}

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

[*]








[url=https://dauphinduegg.com/]
Dauphin Du Egg
[/url]


[url=https://dauphinduegg.com/Blog]Blog[/url]

[url=https://dauphinduegg.com/Shop/]Shop[/url]









[i]





Explore Paintings





Explore Sculptures





Explore Prints





Explore Digital





Explore Animation




By Cassian Feliciano
[blurb]






[img]https://dauphinduegg.neocities.org/assets/visuals/faberge_egg_logo.png[/img]

[list]
Home
[*]Commissions
[*]Shop
[*]Blog
[*]Contact
[/list]






[list]
[*][/i]
[*][i][/i]
[*][i][/i]
[*][i][/i]
[/list]

© Copyright 2025 - Cassian Feliciano

Подробнее здесь: https://stackoverflow.com/questions/798 ... ng-happens