javascript - 根据 window.pageYOffset 更改样式组件样式

Question

所以我有我想根据 window.pageYOffset 更改样式的组件值(value)。当用户向下滚动 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 ， fork 很受欢迎! :)

Answer 1

存储滚动偏移:

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}
`;