当滚动到达页面的某个点时，使用其他内容进行位置固定的 div 滚动

Posted 2023-03-05

【中文标题】当滚动到达页面的某个点时，使用其他内容进行位置固定的 div 滚动

【英文标题】：Make a position fixed div scroll with other contents when scroll hit certain point of page

【发布时间】：2021-12-21 21:30:17

【问题描述】：

我有这个设置。

我需要在滚动到达页脚之前固定这个黄色粘性框的位置。当页脚到达屏幕时，粘性框应与动态内容框一起滚动，反之亦然。我试过position: sticky 但没有运气。 javascript解决方案也可以。

我也尝试了下面的代码，但它不会顺利运行，因为position: relative 使sticky-content-box 直接跳到顶部，而不是滚动左侧内容。

const height = 900; // this would be calculated dynamic content box height

const backGroundAnimation = useCallback(() => 
    if (window.scrollY > height) 
      fixedBox!.current!.style.position = 'relative';
      fixedBox!.current!.style.marginTop = `$heightpx`;
     else 
      fixedBox!.current!.style.position = 'fixed';
    
  , [height]);

  useEffect(() => 
    document.addEventListener('scroll', backGroundAnimation);

    return () => document.removeEventListener('scroll', backGroundAnimation);
  , [backGroundAnimation]);

这是我的code sandbox 设置

请注意，在codesandbox 实现中，我没有在问题中包含我在此处添加的功能。

【问题讨论】：

我认为你想从页脚中分离黄色部分，并希望它只与红色部分保持相对。您可以设置zIndex:-10，这样黄色的内容就会在页脚后面，不再隐藏页脚内容。

不附加到页脚，红色部分和黄色部分是相对元素

【参考方案1】：

我已经检查了您面临的问题，解决方案非常简单，您不需要使用 javascript。您可以使用 css position:sticky。

import "./styles.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

export default function App() 
  return (
    <div className="App">
      <div style= height: "80px", backgroundColor: "blue" >
        top navigation
      </div>
      <div className="container-fluid">
        <div className="row">
          <div
            className="col-sm-8"
            style= height: "900px", backgroundColor: "red" 
          >
            dynamic content
          </div>
          <div className="col-sm-4">
            <div
              style=
                position: "sticky",
                height: "200px",
                top:"0",
                backgroundColor: "yellow",
                width: "100%"
              
            >
              sticky content
            </div>
          </div>
        </div>
      </div>
      <div style= height: "400px", backgroundColor: "blue" >footer</div>
    </div>
  );

---

在上面的代码中，我刚刚更新了这个 css：

style=
  position: "sticky",
  top:"0",
  height: "200px",
  backgroundColor: "yellow",
   width: "100%"

---

position:sticky 的具体工作原理可以在这里找到：How does the "position: sticky;" property work?

【讨论】：

这不起作用，我在问题中也提到过。

它工作正常，作为参考我正在与你分享演示我使用了你的 JSX 代码的 html 源代码 [codepen.io/kukrati/pen/XWaYWEx]

我现在看到了问题，我没有添加top 值。它需要表现出位置粘性。顺便说一句，我刚刚创建它是为了重现生产代码的问题。在我的生产代码中，这不起作用，但似乎找不到问题。这就是为什么我正在寻找一个 javascript 解决方案。感谢您抽出宝贵时间回答这个问题