Div Hintergrundfarbe ändern wenn beim Scrollen top erreicht

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 so weit, 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.

Der hier verwendete Code

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <meta name="robots" content="noindex"> <title>client - page - screen</title> <style> body{ height:4000px; width:120%; } table{ position:fixed; width:80%; left:10%; top:160px; background:#eee; margin:0 auto; border-spacing:5px 10px; } table td{ border:1px solid black; padding:3px 10px; } table th{ background:grey; color:white; } span{ position:absolute; width:200px; left:40px; } h3,h4,span{ background:white; margin:0; padding:0; } </style> </head> <body> <table> <tr> <th>Mouse position innen:</th> <th>X </th> <th>Y</th> <th>    </th> </tr> <tr> <td>scrolltop/left</td> <td id="clientx"></td> <td id="clienty"></td> <td>wie weit wurde nach links und rechts gescrollt</td> </tr> <tr> <td>Mouseposition X,yY</td> <td id="pagex"></td> <td id="pagey"></td> <td>wo ist die maus position</td> </tr> <tr> <td>Document höhe:</td> <td id="doto"></td> <td id="dole"></td> <td>höhe und breite des documents</td> </tr> <tr> <td>Box position </td> <td id="box"></td> <td id="boy"></td> <td>Screen</td> </tr> <tr> <td>Diese Box Position</td> <td id="boxx"></td> <td id="boxy"></td> <td>page</td> </tr> </table> <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.getElementsByTagName('table')[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> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!