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

[Anonymous]

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

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

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