petras page example of scrolling behavior for brenda

petras.js

import React, { useState, useEffect } from "react";

const PetrasPage = (props) => {
  const [lastScrollY, setLastScrollY] = useState(window.scrollY);
  const [logoPosition, setLogoPosition] = useState("0px");

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;

      // determine if ur scrollin down darlin
      if (currentScrollY > lastScrollY) {
        // when doing so, move the logo up (and out of view (for now)) N px
        setLogoPosition(`${-currentScrollY}px`);
      } else {
        // scrolling up = supply whatever value u want it to reappear w/r/t positioning
        setLogoPosition("50px");
      }

      console.log('tyler sayles had a say in this :P!')
      
      // so `window.scrollY` is at play in about 50% of these
      // (other way to do it is using document.scrollTop, or by using .getBoundingClientRect()
      // window.scrollY is a computed window property value and it updates as scrolling occurs
      // i think it's. also the fastest way performance wise, getBoundingClientRect also computes
      // a buttload of other stuff, it's much better for when u have things that have more complex behavior
      // this just updates lastScrollY to the current
      setLastScrollY(currentScrollY);
    };

    window.addEventListener("scroll", handleScroll);
    
    return () => window.removeEventListener("scroll", handleScroll);
  }, [lastScrollY]);

  return (
    <div>
      <h1>PetrasPage</h1>
      <img
        src="https://res.cloudinary.com/cloudimgts/image/upload/f_auto,q_auto/v1695072414/green-glob-gif_xm4tux.gif"
        style={{
          top: logoPosition, // movement magic
          position: "fixed",
          maxWidth: "500px",
          maxHeight: "500px",
          transition: "top 0.3s", // timing on reappearance
        }}
      />
      <div style={{ border: "5px dotted green", height: "500px" }}></div>
      <div style={{ border: "5px dotted green", height: "500px" }}></div>
      <div style={{ border: "5px dotted green", height: "500px" }}></div>
      <div style={{ border: "5px dotted green", height: "500px" }}></div>
      <div style={{ border: "5px dotted green", height: "500px" }}></div>
    </div>
  );
};

export default PetrasPage;