Hallo zusammen,
ich bin neu hier und hoffe man kann mir helfen.
Ich habe 2 Div Container, einmal "parent" und einmal "child".
Div Parent ist scrollbar und Div Child bleibt 20px von Top stehen mit Position:sticky; siehe quelltext.
Ist es möglich, das sich die hintergrundfarbe beim erreichen der top position ändernt.
und wenn ja, wie geht das?
ich bin neu hier und hoffe man kann mir helfen.
Ich habe 2 Div Container, einmal "parent" und einmal "child".
Div Parent ist scrollbar und Div Child bleibt 20px von Top stehen mit Position:sticky; siehe quelltext.
Ist es möglich, das sich die hintergrundfarbe beim erreichen der top position ändernt.
und wenn ja, wie geht das?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" type="text/css" href="../tests/div.css" />
<title>div_change_color</title>
</head>
<body>
<div id="parent">
<div id="child">
dieser bereich soll die farbe ändern
</div>
</div>
</body>
</html>
CSS:
#parent
{
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:50px;
padding-top:120px;
padding-left:0px;
padding-right:0px;
padding-bottom:10px;
width:400px;
height:2000px;
position: relative;
background-color:blue;
border-radius:10px;
box-shadow:3px 3px 9px #000000;
}
#child
{
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:10px;
width:200px;
height:auto;
position: sticky;
top:50px;
background-color:green;
border-radius:10px;
box-shadow:3px 3px 9px #000000;
}