Question

这是我正在使用的组件。

CSS已被添加..只需在滚动不透明度时工作，需要从0更改为1.需要更改css类。设置此代码但不在组件内工作。如何将其放在组件中？？我是新手。

var componentDidMount() {
  window.addEventListener('scroll', (event) => {
     if(//scroll position is top){
         class = 'bg-helper';
     } else {
         class = 'sticky';
     }
     this.setState({
        activeClass: class
     })
  });
}

Answer 1

您可以坚持使用库来解决此问题（反应粘性），也可以使用粘性元素的topPosition检查scrollPosition。

const initialTop = myStickyElement.getBoundingClientRect().top;

window.addEventListener('scroll', (e) => {
  if (window.scrollY < initialTop) {
    this.setState({ activeClass: 'bg-helper' });
  } else {
    this.setState({ activeClass: 'sticky' });
  }
};

问题是，当客户端视口发生更改（翻转智能手机）时，此代码无法正常工作。

但是，如果要在滚动页眉元素的高度时更改为粘滞，则只需修改此行：

const initialTop = myStickyElement.getBoundingClientRect().height;

如何使用React js制作像https://www.acorns.com/这样的粘性标题

1 个答案: