Al ingresar al sitio web, esta es la primera interfaz de usuario que verá.

Luego, si se desplaza hacia abajo hasta el principio de la sección B
Espero que la sección B se vuelva pegajosa y que el estado de currentPercentage comience a aumentar desde el 0 % gradualmente si se desplaza.

Cuando el estado de currentPercentage alcance el 100 %, el efecto adhesivo ya no se aplicará a la sección B, luego podrá desplazarse hacia abajo hasta la sección C o la parte inferior de la página.

Es algo así como la página de inicio de circle-ci

Puede intentar desplazarse en esta sección.

Creo que hay algunas cosas que debemos resolver para la solución.

1. Cómo hacer que la sección B se vuelva pegajosa cuando llega la posición de desplazamiento a la sección B
   
2. Cómo hacer scroll y aumentar el porcentaje al llegar a la sección B
   

He intentado pensar tanto en css como en javascript, todavía no puedo encontrar la solución

También he investigado mucho este problema durante unos días, pero aún no lo he resuelto.
Creo que a muchos desarrolladores les gustaría saber cómo hacer este tipo de efecto en su interfaz, y será beneficioso para otros desarrolladores tener una solución más rápida para lidiar con este tipo de UX en el futuro, ya que por lo que he Noté que nadie ha mencionado este tipo de manejo de UX.

Agradecería si alguien puede responder esta pregunta con un ejemplo, como referencia para otros desarrolladores.

Aplicación.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> ); }

codigosandbox
https://codesandbox.io/s/mutable-fire-sz19b?file=/src/App.js:0-619

Actualización 1
Actualicé el código y puedo hacer que el contenedor B sea pegajoso, pero no sé cómo continuar con la experiencia de usuario.

Aplicación.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> ); }

codigosandbox
https://codesandbox.io/s/elated-hawking-n3rvw?file=/src/App.js:0-778

Actualización 2

Se agregó la biblioteca react-scroll-percentage para desplazarse para actualizar currentProgress

Sin embargo, cuando todo el contenedor B se exponga en la ventana gráfica, el currentProgress comenzará a actualizarse, que no es lo que quiero


Lo que quiero es que cuando la Sección B llegue a la parte superior de la ventana gráfica, el desplazamiento hará que el usuario se sienta pegajoso y luego currentProgress comenzará a actualizarse desde el 0 %.

Aplicación.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> ); }

codigosandbox
https://codesandbox.io/s/elated-hawking-n3rvw?file=/src/App.js:0-1029