javascript - 当元素位于视口(viewport)顶部时如何开始更新滚动百分比

Question

进入网站时，这是您将看到的第一个 UI。

然后，如果您向下滚动到 B 部分的最开头
我预计 B 部分会变得粘稠，currentPercentage如果滚动，状态将从 0% 开始逐渐增加。

当currentPercentage状态达到100%，B节不再有粘性效果，可以向下滚动到C节或页面底部。

有点像 circle-ci主页
您可以尝试在此部分滚动。

我认为我们需要解决一些问题

滚动位置到达B节时如何使B节变粘

到达B区时如何滚动增加百分比

我试过用 css 和 javascript 的方式思考，仍然找不到解决方案
几天来，我也对这个问题进行了大量研究，但仍然没有弄清楚。
我相信很多开发者都想知道如何在他们的前端中做这种效果，这对其他开发者在 future 有更快的解决方案来处理这种 UX 是有益的，因为据我所知注意到没有人提到过这种 UX 处理。
如果有人可以用一个例子回答这个问题，我将不胜感激，以供其他开发人员引用。
应用程序.js

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

import ProgressBar from "react-bootstrap/ProgressBar";

import { useState } from "react";

export default function App() {
  const [currentProgress, setCurrentProgress] = useState(100);
  return (
    <div className="App">
      <div className="sectionA">Section A</div>
      <div className="sectionB">
        Section B
        <ProgressBar
          now={currentProgress}
          label={`${currentProgress}%`}
          style={{ marginBottom: "16px" }}
        />
      </div>
      <div className="sectionC">Section C</div>
    </div>
  );
}

密码沙盒
https://codesandbox.io/s/mutable-fire-sz19b?file=/src/App.js:0-619
更新 1
我更新了代码，可以让容器 B 变粘，但不知道如何继续 UX
应用程序.js

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

import ProgressBar from "react-bootstrap/ProgressBar";

import { useState } from "react";

export default function App() {
  const [currentProgress, setCurrentProgress] = useState(3);
  return (
    <div className="App">
      <div className="sectionA">Section A</div>
      <div style={{ position: "sticky", top: 0 }}>
        <div className="sectionB">
          Section B
          <ProgressBar
            now={currentProgress}
            label={`${currentProgress}%`}
            style={{ marginBottom: "16px" }}
          />
        </div>
        <div className="sectionC">Section C</div>
      </div>
      <div style={{ minHeight: "400vh", maxHeight: "calc(200vh - 466px)" }} />
    </div>
  );
}

密码沙盒
https://codesandbox.io/s/elated-hawking-n3rvw?file=/src/App.js:0-778
更新 2
添加库 react-scroll-percentage滚动更新 currentProgress但是，当整个容器 B 暴露在视口(viewport)中时， currentProgress将开始更新，这不是我想要的

我想要的是当 SectionB 到达视口(viewport)顶部时，滚动会让用户感到粘滞，然后 currentProgress将从 0% 开始更新
应用程序.js

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import { useScrollPercentage } from "react-scroll-percentage";

import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  const [currentProgress, setCurrentProgress] = useState(0);

  const [ref, percentage] = useScrollPercentage({
    threshold: 1.0
  });
  useEffect(() => {
    setCurrentProgress(percentage * 100);
  }, [percentage]);

  return (
    <div className="App">
      <div className="sectionA">Section A</div>
      <div style={{ position: "sticky", top: 0 }}>
        <div className="sectionB" ref={ref}>
          Section B
          <ProgressBar
            now={currentProgress}
            label={`(${currentProgress})%`}
            style={{ marginBottom: "16px" }}
          />
        </div>
        <div className="sectionC">Section C</div>
      </div>
      <div style={{ minHeight: "400vh", maxHeight: "calc(200vh - 466px)" }} />
    </div>
  );
}

密码沙盒
https://codesandbox.io/s/elated-hawking-n3rvw?file=/src/App.js:0-1029

Answer 1

你需要听scroll事件，检查 scrollTop滚动元素，并决定 css 和 currentProgress需要。当每个部分的高度已知且恒定时，这是最简单的。外部元素还需要一个较大的预定高度，以便为滚动留出空间。
代码可能只是

if (scrollTop > heightofSectionA) {
    //set sectionB css to {position: fixed, top: 0, ...}
    currentProgress = (scrollTop-heightofSectionA)/lengthofSectionB*100
} else {
    //set sectionB css to {position: static}
    currentProgress = 0
}

html 和 css 的外观有多种方式。与 position: sticky您可能根本不需要更改 css。但只要你知道滚动的任何阶段的 css 应该是什么样子，在它们之间切换应该没有问题。