JSFiddle - React, Tailwind, and code Playground

by mathiasfcx

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id='Pai'>

    <p>Elemento A</p>
    <p>Elemento B</p>
    <p>Elemento C</p>
    <p>Elemento D</p>
    <p>Elemento E</p>
    <p>Elemento F</p>
    <p>Elemento G</p>
    <p>Elemento H</p>
    <p>Elemento I</p>
    <p>Elemento J</p>

    <div id='Filho'></div>

  </div>
</body>

CSS

body {
  height: 800px;
}

#Pai {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid blue;
  text-align: center;
  overflow: auto;
}

#Filho {
  width: 100px;
  height: 100px;
  margin-left: -50px;
  /* metade da largura */
  margin-top: -50px;
  /* metade da altura */
  position: absolute;
  /* alterei aqui */
  top: 100px;
 
  /* alterei aqui */
  left: 200px;
  /* alterei aqui */
  background: tomato;
  z-index: 1; // sobrepor
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

JavaScript

$("#Pai").scroll(function() {
  console.log($("#Pai").scrollTop());
  $("#Filho").css("top", $("#Pai").scrollTop() + 100);
});