Изменить стиль стилевого компонента на основе window.pageYOffset

Question

Итак, у меня есть компонент, для которого я хотел бы изменить стиль на основе значения window.pageYOffset. Когда пользователь прокручивает значение X вниз, я хотел бы изменить цвет фона, хотя это не должно ограничиваться только цветом фона, так как я также могу изменить другие свойства, такие как font-size, color, padding и т. Д.

Вот то, что у меня сейчас есть.

const AppHeader: React.FC = () => {
  const [scrollY, setScrollY] = React.useState('')

  function handleScroll() {
    if (window.pageYOffset > 1) {
      // Be able to change styling properties based on true / false.
    }
  }

  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <Header>
      <h1>Header!</h1>
    </Header>
  )
}

const Header = styled.header`
  // Somehow change the backgound color if window.pageYOffset is greater than value.
  background: ${({color}) => color ? "red" : "blue"};
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
`

Вот CodeSandBox , вилки оценены! :)

Answer 1

Вот мой подход к проблеме.
Используйте функцию handleScroll, чтобы установить значение переменной scrollY.
Как:

function handleScroll() { setScrollY(window.pageYOffset); }

Кроме того, поскольку window.pageYOffset будет number, поэтому оставьте initialState элемента scrollY равным 0.
Как:

const [scrollY, setScrollY] = React.useState(0);
Теперь отправьте scrollY в качестве реквизита для компонента Header и используйте его для изменения background-color и других свойств компонента, таких как color, font-size, et c.
Полное решение можно найти в моей раздвоенной версии кода-песочницы.

Песочница: https://codesandbox.io/s/change-styled-component-styling-based-on-windowpageyoffset-y46nj?file= / src / App.tsx

Веб-сайт: https://y46nj.csb.app/

Answer 2

Сохранение смещения прокрутки:

function handleScroll() {
  setScrollY(window.pageYOffset);
}

Передача цвета стилевому компоненту:

  return (
    <Header color={scrollY > 1}>
      <h1>Header!</h1>
    </Header>
  )

Чтобы изменить несколько свойств одновременно, вы можете импортировать {css} из стилевых компонентов:

import styled, { css } from 'styled-components';

// Define a pure group of css properties
const blueLook= css`
    background-color: #0000ff;
    color: #fff;
`

// Reuse blueLook inside a styled component
const Header = styled.header`
  ${props => props.color && blueLook}
`;