0

I have this setup. enter image description here

I need this yellow sticky box to be position fixed until the scroll reaches the footer. when the footer hits the screen, the sticky box should scroll with the dynamic content box and vise versa. I tried position: sticky but no luck. javascript solutions will be also OK.

I also tried the below code also, but it will not work smoothly, since position: relative makes the sticky-content-box jump directly to the top, not scroll with the left side content.

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]);

here's a code sandbox setup I have

please note that with the codesandbox implementation I did not include the functions I added here in the question.

Sanira Nimantha
  • 1,160
  • 1
  • 12
  • 29
  • I think you want to detach yellow part from footer and want it to stay relative only to red part. You can set `zIndex:-10` so the yellow content will go behind footer and no longer hide footer content. – the Hutt Nov 09 '21 at 06:41
  • it's not attached to the footer, red part and yellow part are relative elements – Sanira Nimantha Nov 09 '21 at 07:36

1 Answers1

1

I have checked issue which you are facing and the solution is very simple you don't need to use javascript for it. You can just use 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>
  );
}

in above code i have just updated this css:

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

How position:sticky exactly works can be found here: How does the "position: sticky;" property work?

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
Vivek
  • 44
  • 2
  • this is not working, I mentioned that in the question also. – Sanira Nimantha Nov 09 '21 at 07:21
  • 1
    It is working fine, for reference i am sharing the the demo with you i have used the HTML source of your JSX code [ https://codepen.io/kukrati/pen/XWaYWEx ] – Vivek Nov 09 '21 at 07:46
  • I see the issue now, I did not add `top` value. it's needed to behave position sticky. BTW I just created it to recreate my problem with production code. In my production code this is not working, can't seem to find the issue though. That's why I am looking for a javascript solution. Thanks for your time to answer this – Sanira Nimantha Nov 09 '21 at 08:05