基于JavaScript实现滚动时在网格上方叠加文本框的问题求助

嘿，我明白你想实现的效果啦——滚动页面时，在黑色矩形网格上方弹出文本框，停留一会儿供用户阅读对吧？你提到用HTML和JS尝试后没成功，文本框不显示，我来帮你梳理下问题，再给你一个能跑通的完整方案~

先说说你现有代码可能的问题 #

你目前只定义了infoBoxes的数据，但没做这几件关键的事：

• 没有创建DOM元素把这些文本框渲染到页面上
• 没有监听滚动事件，判断什么时候该显示/隐藏文本框
• 大概率缺少CSS来控制文本框的定位（比如要叠加在网格上方，必须设置层级和定位方式）

完整可运行的实现方案 #

我给你写了一套完整的代码，包含HTML、CSS和JS，你可以直接复用，再根据需求调整细节：

1. HTML结构

需要一个专门放文本框的容器（用来控制层级，确保在网格上面），再加网格容器：

<div class="info-box-container"></div>
<div id="grid" class="grid-container"></div>

2. CSS样式

给网格做黑色矩形布局，文本框设置固定定位、高层级，默认隐藏：

/* 网格样式：生成黑色矩形网格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  min-height: 200vh; /* 让页面足够长，能触发滚动 */
  padding: 20px;
}

.grid-item {
  background-color: #000;
  aspect-ratio: 1; /* 让矩形保持正方形 */
}

/* 文本框容器：固定在视口顶部，确保在网格上方 */
.info-box-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  z-index: 10; /* 层级高于网格 */
  width: 80%;
  max-width: 600px; /* 限制最大宽度，避免太宽 */
}

/* 单个文本框样式 */
.info-box {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none; /* 默认隐藏 */
  transition: opacity 0.3s ease;
}

.info-box.active {
  display: block; /* 激活时显示 */
}

.info-box h3 {
  margin-top: 0;
  color: #333;
}

3. JavaScript逻辑

要做四件事：生成网格、创建文本框、监听滚动、控制文本框显示/隐藏：

document.addEventListener('DOMContentLoaded', (event) => {
  const gridContainer = document.getElementById('grid');
  const infoBoxContainer = document.querySelector('.info-box-container');
  
  // 1. 生成黑色网格（这里做100个，你可以调整数量）
  for (let i = 0; i < 100; i++) {
    const gridItem = document.createElement('div');
    gridItem.classList.add('grid-item');
    gridContainer.appendChild(gridItem);
  }

  // 2. 文本框数据：可以自定义标题、内容、触发滚动位置、停留时间
  const infoBoxes = [
    {
      title: 'Information Box 1',
      content: 'This is some information about the conflict.',
      triggerScrollPosition: 200, // 滚动到200px时触发显示
      duration: 3000 // 停留3秒后隐藏
    },
    {
      title: 'Information Box 2',
      content: 'More details and statistics.',
      triggerScrollPosition: 600,
      duration: 3000
    },
    {
      title: 'Information Box 3',
      content: 'Additional context and analysis.',
      triggerScrollPosition: 1000,
      duration: 3000
    }
  ];

  // 3. 把文本框数据转换成DOM元素
  infoBoxes.forEach((box, index) => {
    const infoBox = document.createElement('div');
    infoBox.classList.add('info-box');
    infoBox.dataset.index = index; // 给每个文本框加索引标识
    infoBox.innerHTML = `
      <h3>${box.title}</h3>
      <p>${box.content}</p>
    `;
    infoBoxContainer.appendChild(infoBox);
  });

  let currentActiveBox = null;
  let hideTimeout = null;

  // 4. 监听滚动事件，控制文本框显示
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;

    // 找到当前滚动位置对应的文本框
    const matchingBox = infoBoxes.find(box => scrollY >= box.triggerScrollPosition);
    
    if (matchingBox) {
      const boxIndex = infoBoxes.indexOf(matchingBox);
      const targetBox = document.querySelector(`.info-box[data-index="${boxIndex}"]`);

      // 如果当前要显示的和已显示的是同一个，就跳过
      if (currentActiveBox === targetBox) return;

      // 先隐藏之前的文本框
      if (currentActiveBox) {
        currentActiveBox.classList.remove('active');
      }

      // 显示新的文本框
      currentActiveBox = targetBox;
      currentActiveBox.classList.add('active');

      // 清除之前的隐藏定时器
      if (hideTimeout) clearTimeout(hideTimeout);

      // 设置定时器，到时间后隐藏文本框
      hideTimeout = setTimeout(() => {
        if (currentActiveBox) {
          currentActiveBox.classList.remove('active');
          currentActiveBox = null;
        }
      }, matchingBox.duration);
    } else {
      // 滚动位置还没到第一个触发点，隐藏所有文本框
      if (currentActiveBox) {
        currentActiveBox.classList.remove('active');
        currentActiveBox = null;
      }
    }
  });
});

调试小技巧 #

如果还是遇到文本框不显示的情况，可以检查这几点：

• 按F12打开控制台，看Console面板有没有JS报错
• 确认CSS里的z-index值足够大，确保文本框不会被网格挡住
• 检查triggerScrollPosition的数值，确保页面高度足够滚动到那个位置（比如页面最小高度是200vh，你设置的触发位置不能超过页面实际可滚动高度）

备注：内容来源于stack exchange，提问作者Alex Oort Alonso