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

在滚动父页面上显示div元素可以使用CSS或JavaScript来实现。

使用CSS的方法：

首先，确保要显示的div元素有一个固定的高度和宽度，并设置其样式为display: none;，以隐藏它。
然后，为父页面的滚动容器添加一个滚动事件监听器。
在滚动事件处理程序中，检查滚动容器的scrollTop属性，该属性表示滚动条距离容器顶部的距离。
如果scrollTop大于等于要显示的div元素距离父容器顶部的距离，将div元素的样式设置为display: block;，以显示它；否则，将其样式设置为display: none;，以隐藏它。

示例代码如下：

<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>

使用JavaScript的方法：

获取要显示的div元素和父页面的滚动容器。
添加一个滚动事件监听器。
在滚动事件处理程序中，检查滚动容器的scrollTop属性，该属性表示滚动条距离容器顶部的距离。
如果scrollTop大于等于要显示的div元素距离父容器顶部的距离，将div元素的样式设置为display: block;，以显示它；否则，将其样式设置为display: none;，以隐藏它。

示例代码如下：

<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>

这种方法可以在滚动父页面时动态显示或隐藏div元素，适用于需要根据滚动位置来控制元素显示的场景，比如实现懒加载、固定导航栏等效果。