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

Question

我有这个设置。

我需要在滚动到达页脚之前固定这个黄色粘性框的位置。当页脚到达屏幕时，粘性框应与动态内容框一起滚动，反之亦然。我试过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 = `${height}px`;
    } else {
      fixedBox!.current!.style.position = 'fixed';
    }
  }, [height]);

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

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

这是我的code sandbox 设置

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

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