Archiv-Modus von Basti1012 Lösungspage

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.

Code

                                    
                                <html>
<head>
<script src="/js_webseite/jquery.js"></script>
<meta charset=utf-8 />
<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>

basti1012.bplaced.net

Div Hintergrundfarbe ändern wenn beim Scrollen top erreicht

Code