Oh okay, dann bitte ich vielmals um Entschuldigung.
Das war nicht beabsichtigt. Ich bin meist nicht in foren zum posten unterwegs. Ich versuch es meistens selbst herraus zu bekommen.
Beiträge von J_Ultima
-
-
Habe versucht das div über die id anzusprechen und nicht über den tag. Aber das funktioniert auch nicht wenn ich die [0] entferne.
Vielen dank, das probiere ich gleich mal aus.
Und dann noch
Was ist verkehrt in mehreren Foren zu posten?
-
Also, ich habe jetzt mal ein wenig rum probiert,
ich bekomme es nicht hin das mir in irgendeiner form die Position meines Divcontainers angezeigt wird.
Hab zuletzt das "GetElementsByTagName" durch "GetElementById" ersetzt um geziehlt diese anzusprechen, aber es funktioniert nicht.
Was mach ich Falsch?HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta charset=utf-8 /> <link rel="stylesheet" type="text/css" href="../tests/div.css" /> <meta name="robots" content="noindex"> <title>div_change_color</title> <script> $(document).scroll(function(e){ weiter(e) }) $(document).mousemove(function(e){ weiter(e); }) $( window ).resize(function(e) { res(); }) function res(){ $('#doto').html($(document).height()) $('#dole').html($(document).width()) } function weiter(e){ $('#clientx').html($(document).scrollTop()); $('#clienty').html($(document).scrollLeft()); $('#pagex').html(e.pageX); $('#pagey').html(e.pageY); el=document.getElementById('child')[0]; $('#box').html(el.offsetLeft); $('#boy').html(el.offsetTop); re=getOffset(el) $('#boxx').html(re.left); $('#boxy').html(re.top); } function getOffset(el) { const rect = el.getBoundingClientRect(); return { left: rect.left + window.scrollX, top: rect.top + window.scrollY }; } res(); </script> </head> <body> <table class="anzeige"> <tr> <td>position von div child</td> <td id="boxx">x</td> <td id="boxy">y</td> <td>page</td> </tr> </table> <div id="parent"> <div id="child"> dieser bereich soll die farbe ändern </div> </div> </body> </html>CSS Datei
Code
Alles anzeigen#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; } .anzeige { margin-left:10px; width:200px; background-color:lime; position:fixed; } -
Das wäre ein teil des quelltextes.
Der Div container child01-index bleibt beim scrollen dann 20px von oben stehen.
Normal ist die hintergrundfarbe transparent, und soll wenn der container oben ist weiß werden.Danke für deinen code, muss ich erstmal verstehen wie dieser funktioniert.
Code
Alles anzeigen<div id="parent-index"> <div id="child01-index"> <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td class="text-def-nav"> <a href="http://weltenbauer.mygigahost.de/bluetenzauber/index.php">Startseite</a></td> <td class="text-def-nav"> <a href="http://weltenbauer.mygigahost.de/bluetenzauber/01/01.php">Leistungen</a></td> <td class="text-def-nav"> <a href="http://weltenbauer.mygigahost.de/bluetenzauber/02/02.php">Über Uns</a></td> <td class="text-def-nav"> <a href="http://weltenbauer.mygigahost.de/bluetenzauber/03/03.php">Kontakt</a></td> </tr> </table> </div>CSS Teil
Code
Alles anzeigen#child01-index { height:auto; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:5px; padding-bottom:5px; padding-left:5px; padding-right:5px; background-color: red; max-width:1024px; position: sticky; top: 20px; background-color: green; z-index:2; } -
hallo zusammen,
Ich hoffe ich bin hier richtig.
Frage?
Ist es möglich, dass sich die Hintergrundfarbe eines div ändert, wenn dieser beim Scrollen den top Bereich erreicht?
Ich habe es zwar mit "position:sticky" und top soweit, dass der div stehen bleibt beim Scrollen,
und der Rest dahinter weiter scrollt, aber ich weiß nicht wie ich die farbe ändern kann.
Ist das überhaupt möglich? Und wenn ja, wie?
Ich bin ein absoluter Anfänger, dies vorweg.
Vielen Dank für eure Antworten.