首页 > 代码库 > React制作吸顶功能总结
React制作吸顶功能总结
总结一下最近用react写项目时，遇到的一些坑，恩，真的还蛮坑的，主要是设置状态的时候特别不好控制，下面我们一起来看下，这里自己做了几个demo，分别看下，
主页面代码如下：
class Head extends React.Component { constructor(props) { super(props); this.state = { contentClass:"conditionArea" }; this.windowOnScroll(); let isScrollTop = true; }; windowOnScroll(){ let _this = this; window.onscroll = function(){ //获取滚动条滚动的距离 let h = document.body.scrollTop; console.log(h); if(h > 74){ console.log(‘111‘); _this.setState({ contentClass:"conditionArea conditionArea_fixed" }); }else{ _this.setState({ contentClass:"conditionArea" }); } } }; render() { return ( <div className="container"> <div className="set_head_fixed"> <span className="set_text">我是头部</span> </div> <div id="conditionArea" className={this.state.contentClass}> <div className="content_name"> <span>置顶块</span> </div> </div> <div className="set_displayContent"> <p>内容区域</p> </div> </div> ); } }; function APP (){ return ( <div className="head_top "> <Head title="头部" /> </div> ) }; ReactDOM.render( <APP />, document.getElementById(‘demo‘) ); 1:头部与吸顶的块，一起移动的问题
问题：鼠标滚动到顶部时候，状态一直在更改，我们来看下效果图：
看吧，很明显，这是一个bug，有问题，那我们继续改，为什么状态一直在更改呢，这里我们可以用一个变量来进行控制，逻辑大概是，当滚轮达到顶部时
将其置为false，那它的状态就只会更改一次了。我们来看下核心代码，其它代码不再贴了。
if(h > 74){ if(isScrollTop){ console.log(‘111‘); isScrollTop = false; _this.setState({ contentClass:"conditionArea conditionArea_fixed" }); }else{ console.log("333"); _this.setState({ contentClass:"conditionArea" }); }}我们来看下控制台打印出来的结果：为什么会出现这么多3呢？首先，有两种情况，一种用户向上滑动，然后向下滑动，另外就是，向上滑动-向下滑动-向上滑动操作
因此，当小于74px的时候，我们同样要控制它的状态。
控制后的结果 
ok，我们状态控制好啦，代码如下：
if(h > 74){ if(isScrollTop){ console.log(‘111‘); isScrollTop = false; _this.setState({ contentClass:"conditionArea conditionArea_fixed" }); } }else{ if(!isScrollTop){ console.log("333"); isScrollTop = true; this.setState({ contentClass:"conditionArea" }); } }2:头部固定，吸顶的块移动
与上面的区别是定位的问题，这里要注意一下，无论上面哪种，吸顶的块都应该是由position：absolute 变为 position : fixed，经博主检测，使用position : relative会出现问题
在微信打开，qq浏览器，UC浏览器，百度浏览器打开均会出现卡顿，反应慢的问题，后来我就用了absolute进行定位，问题就好啦，另外，注意解决fixed的兼容性问题，setState的
做法有问题，setState是异步的，没办法做到立马将效果展示出来，必要时候直接操作DOM元素来解决问题。
css样式如下：
body { display: block; margin: 0px; padding: 0px; color: #fff;}.set_head_fixed{ border:1px solid red; width:100%; height:74px; background-color: #54B6E3; color: #fff; text-align: center; position: relative;}.set_text{ margin-top: 5px;}.conditionArea{ width: 100%; height: 80px; background-color:#66C6AD; border: 1px solid blue; text-align: center; position: absolute;}.conditionArea_fixed{ position: fixed; top: 0px; z-index: 44;}.set_displayContent{ position: relative; margin: 60px 10px; height: 1700px; background: #fc9720; border-radius: 8px;}其实，感觉，利用变量来控制状态是非常好的办法，关键是要知道什么时候去控制它，调用它。
3：关于setState函数
特点：
1：是异步函数。
2： this.setState 还没有被调用；
3： 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。
同步更新方法：
1：直接操作DOM
2: 在componentWillUpdate生命周期或者componentDidUpdate生命周期的回调函数去执行我们的操作。
componentDidMount(){ //执行操作 };3：回调函数
this.setState({},()=>{ //执行操作});React制作吸顶功能总结