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

Question

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

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

当currentPercentage状态达到100%时，粘滞效果将不再适用于B区，此时您可以向下滚动至C区或页面底部。

有点像circle-ci主页

您可以尝试在此部分滚动。

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

1. 当滚动位置到达 B 部分时如何使 B 部分变得粘滞
   
2. 到达B区时如何滚动和增加百分比
   

我尝试过用 css 和 javascript 的方式思考，仍然找不到解决方案

这几天我也对这个问题进行了大量研究，但仍然没有弄清楚。
我相信很多开发人员都想知道如何在他们的前端做这种效果，这对其他开发人员将来有更快的解决方案来处理这种用户体验是有益的，因为据我所知注意到没有人提到过这种 UX 处理。

如果有人能用一个例子回答这个问题，我将不胜感激，以供其他开发人员参考。

App.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

App.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

但是，当整个 containerB 暴露在视口中时，currentProgress 将开始更新，这不是我想要的


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

App.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 应该是什么样子，在它们之间切换应该没有问题。