在滚动父页面上显示div元素css或javascript

<style>
  .scroll-container {
    height: 400px;
    overflow-y: scroll;
  }
  .scroll-div {
    display: none;
    height: 200px;
    width: 200px;
    background-color: #ccc;
    margin-top: 500px; /* 距离父容器顶部的距离 */
  }
</style>

<div class="scroll-container">
  <div class="scroll-div"></div>
  <!-- 其他内容 -->
</div>

<script>
  var scrollContainer = document.querySelector('.scroll-container');
  var scrollDiv = document.querySelector('.scroll-div');

  scrollContainer.addEventListener('scroll', function() {
    if (scrollContainer.scrollTop >= scrollDiv.offsetTop) {
      scrollDiv.style.display = 'block';
    } else {
      scrollDiv.style.display = 'none';
    }
  });
</script>

<div id="scrollContainer" style="height: 400px; overflow-y: scroll;">
  <div id="scrollDiv" style="display: none; height: 200px; width: 200px; background-color: #ccc; margin-top: 500px;"></div>
  <!-- 其他内容 -->
</div>

<script>
  var scrollContainer = document.getElementById('scrollContainer');
  var scrollDiv = document.getElementById('scrollDiv');

  scrollContainer.addEventListener('scroll', function() {
    if (scrollContainer.scrollTop >= scrollDiv.offsetTop) {
      scrollDiv.style.display = 'block';
    } else {
      scrollDiv.style.display = 'none';
    }
  });
</script>