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

[Anonymous]

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

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

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 {

}

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

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config',  'G-K7X3FHJYH4');



(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5QJCL2X');


Gallery
[*]














[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





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");
}
});

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