Sticky定位文本框失效及Canvas布局异常问题求助

针对你遇到的两个布局问题，以下是具体分析和修复方法：

问题1：文本元素定位异常（描述为Sticky失效） #

你的代码中，文本元素设置了position: fixed，但被嵌套在#scroll-container内部——这个容器设置了overflow-y: scroll，结合滚动逻辑，导致定位表现异常：

• fixed元素本应相对于视口定位，但父容器的滚动监听逻辑（你监听的是window scroll）和文本的嵌套结构，导致文本切换逻辑失效；
• 可能存在z-index层级问题，文本被canvas遮挡，视觉上看起来像是“定位失效”。

修复步骤： #

1. 调整DOM结构：将文本元素移出#scroll-container，直接放在body下，确保fixed定位的包含块为视口；
2. 设置层级关系：给文本元素添加z-index: 10，canvas设置z-index: 5，确保文本显示在canvas上方；
3. 保留原有滚动逻辑：因为#scroll-container设置了500vh高度，会触发window滚动，无需修改监听对象。

问题2：Canvas忽略其他元素Margin，显示在上方 #

Canvas使用position: fixed会完全脱离文档流，不占用文档空间，因此不会受其他元素margin的影响。要让它和T恤元素保持间距，可采用以下方案：

修复步骤： #

1. 手动调整定位偏移：修改Canvas的top值或transform参数，手动留出和T恤的间距；
2. 结合Margin与Transform：给Canvas添加margin-top: [对应T恤Margin值]，同时调整transform: translate(-50%, -[Margin值])，抵消margin带来的定位偏移；
3. 层级调整（可选）：如果需要T恤显示在Canvas上方，给T恤元素添加position: relative和z-index: 15。

修改后的完整代码示例 #

CSS 代码 #

.flashy {
  height: 500vh;
  display: flex;
}

canvas {
  position: fixed;
  left: 40%;
  top: 30%;
  max-height: 100vh;
  max-width: 520px;
  transform: translate(-50%, 0%);
  z-index: 5; /* 低于文本层级 */
  /* 示例：若T恤margin-top为30px，添加以下代码 */
  /* margin-top: 30px; */
  /* transform: translate(-50%, -30px); */
}

#scroll-container {
  height: 500vh;
  overflow-y: scroll;
  position: relative;
}

#text-element,
#subtext-element {
  position: fixed;
  width: fit-content;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 10; /* 确保文本在canvas上方 */
}

#text-element {
  top: 18%;
  left: 48%;
  font-size: 4em;
  margin: 0.67em 0;
  font-weight: bold;
}

#subtext-element {
  top: 30%;
  left: 49%;
  font-size: 28px;
  margin: 1em 0;
  font-weight: bold;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
 <div id="flashy"></div>
 <div class="imp">
    <canvas id="hero-lightpass"></canvas>  
 </div> 

 <!-- 文本元素移出滚动容器 -->
 <div id="text-element">Initial Text</div>
 <div id="subtext-element">Initial Text</div>

 <div id="scroll-container"></div>          
</body>
</html>

JavaScript 代码（修正语法错误） #

// 修正jQuery语法错误
$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    $('.parallax-container').css('background-position', 'center ' + scrollTop / 2 + 'px');
});

// Canvas设置
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
const container = document.getElementById('scroll-container');
const textElement = document.getElementById('text-element');
const subtextElement = document.getElementById('subtext-element')
const totalSections = 10;

canvas.width=1158;
canvas.height=1000;

// 预加载图片
const currentFrame = index => (`Drink/Green${index.toString()}.jpg`);
const frameCount = 148;
const images = [];

const preloadImages = () => {
    for (let i = 1; i < frameCount; i++) {
        images[i] = new Image();
        images[i].src = currentFrame(i);
    }
};

preloadImages();

// 绘制第一张图
const img = new Image();
img.src = currentFrame(1);
img.onload = function(){
    context.drawImage(img, 0, 0);
}

// 滚动交互逻辑
const html = document.getElementsByTagName('html');

const texts = [
    "Rejuvenate",
    'New Text 2',
    'New Text 3',
    'New Text 4',
    'New Text 5',
    'New Text 6',
    'New Text 7',
    'New Text 8',
    'New Text 9',
    'New Text 10'
];

const subtexts = [
    "Orange, Pineapple, Lime, Ginger, Carrot, Red Apple",
    'New Text 2',
    'New Text 3',
    'New Text 4',
    'New Text 5',
    'New Text 6',
    'New Text 7',
    'New Text 8',
    'New Text 9',
    'New Text 10'
];

let currentSectionIndex = 0;
let isInCurrentSection = false;

window.addEventListener('scroll', () => {  
    const scrollTop = html[0].scrollTop;
    const maxScrollTop = html[0].scrollHeight - window.innerHeight;
    const scrollFraction = scrollTop / maxScrollTop;
    const frameIndex = Math.min(
        frameCount - 1,
        Math.floor(scrollFraction * frameCount)
    );

    requestAnimationFrame(() => context.drawImage(images[frameIndex + 2], 0, 0));

    const containerHeight = container.offsetHeight;
    const sectionHeight = containerHeight / totalSections;
    const sectionIndex = Math.floor(scrollTop / sectionHeight);

    if (((scrollFraction * 100) % 10) === 0) {
        currentSectionIndex = ((scrollFraction * 10) / 10)
    }

    if (sectionIndex !== currentSectionIndex) {
        textElement.style.opacity = '0';
        subtextElement.style.opacity = '0';
        setTimeout(() => {
            textElement.textContent = texts[currentSectionIndex];
            subtextElement.textContent = subtexts[currentSectionIndex];
            textElement.style.opacity = '1';
            subtextElement.style.opacity = '1';
        }, 400);
        currentSectionIndex = sectionIndex;
    }
});

内容的提问来源于stack exchange，提问作者Myles Wirth