我在这个网站上看到了这个粘性标题:http : //dunked.com/ (不再有效,查看存档的网站)
当您向下滚动时,粘性标题从顶部向下.
我查看了代码,但看起来很复杂.我只明白这一点:正常的标题用JS克隆,当你向下滚动页面时,它从顶部开始动画.
我正在使用bootstrap 4导航栏,并希望在ig 400px向下向下滚动后更改背景颜色.我正在查看反应文档并找到了一个onScroll但却找不到那么多信息.到目前为止我有
我不知道我是否正在使用正确的事件监听器或如何设置高度等.
我并没有真正设置内联样式
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = { scrollBackground: 'nav-bg' };
this.handleScroll = this.handleScroll.bind(this);
}
handleScroll(){
this.setState ({
scrollBackground: !this.state.scrollBackground
})
}
render() {
const scrollBg = this.scrollBackground ? 'nav-bg scrolling' : 'nav-bg';
return (
<div>
<Navbar inverse toggleable className={this.state.scrollBackground}
onScroll={this.handleScroll}>
...
</Navbar>
</div>
);
}
}
export default App;
Run Code Online (Sandbox Code Playgroud)