吸顶处理

public/react/src/modules/courses/ordering/Ordering.js

@@ -22,7 +22,9 @@ class Ordering extends Component{
 		this.state={
 			isSpin:false,
 			antIcon:false,
-			datas:undefined
+			datas:undefined,
+			windowsscrollTop:false,
+			windowsscrollTopsum:0
 		}
 	}
 
@@ -49,7 +51,43 @@ class Ordering extends Component{
 				isSpin:false
 			})
 		})
+
+		window.addEventListener('scroll', this.handleScroll.bind(this)) //监听滚动
+		// window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变
+	}
+
+
+	// componentWillUnmount() { //一定要最后移除监听器，以防多个组件之间导致this的指向紊乱
+	// 	window.removeEventListener('scroll', this.handleScroll.bind(this))
+	// 	window.removeEventListener('resize', this.handleResize.bind(this))
+	// }
+
+	handleScroll=(e)=>{
+		// console.log(
+		// 	'浏览器滚动事件',
+		// 	e.srcElement.scrollingElement.scrollTop,
+		// 	e.srcElement.scrollingElement.scrollHeight
+		// )
+		//e.srcElement.scrollingElement.scrollTop为距离滚动条顶部高度
+		// e.srcElement.scrollingElement.scrollHeight为整个文档高度
+
+		if(e.srcElement.scrollingElement.scrollTop>60){
+			this.setState({
+					windowsscrollTop:true,
+				  windowsscrollTopsum:e.srcElement.scrollingElement.scrollTop
+			})
+	   }
+
+	   if(e.srcElement.scrollingElement.scrollTop===0){
+			 this.setState({
+				 windowsscrollTop:false
+			 })
+		 }
 	}
+	//
+	// handleResize = e => {
+	// 	console.log('浏览器窗口大小改变事件', e.target.innerWidth)
+	// }
 
 
 
@@ -112,16 +150,28 @@ class Ordering extends Component{
 
 	}
 
+
 	render(){
 		let {
 			datas,
 			Modalstype,
+			windowsscrollTop,
+			windowsscrollTopsum
 		}=this.state;
 
 		let main_id=this.props.match.params.main_id;
 		let category_id=this.props.match.params.category_id;
 
 		console.log(this.props)
+		console.log(window)
+
+		let positiontype=null;
+
+		if(windowsscrollTop===true){
+			positiontype={position:'fixed',zIndex:'9000',left:'20%',top: '0px'}
+		}else{
+			positiontype={}
+		}
 		return(
 
 				<div className={"mb200"}>
@@ -139,7 +189,7 @@ class Ordering extends Component{
 
 					<div className="educontent clearfix">
 
-						<div className={"mt20 mb20"}>
+						{windowsscrollTop===false?<div className={"mt20 mb20"}>
 
 								<Breadcrumb separator=">">
 									<Breadcrumb.Item href={this.props.current_user&&this.props.current_user.first_category_url}>{this.props.current_user&&this.props.current_user.course_name}</Breadcrumb.Item>
@@ -147,16 +197,15 @@ class Ordering extends Component{
 									<Breadcrumb.Item>调整排序</Breadcrumb.Item>
 								</Breadcrumb>
 
-						</div>
-
+						</div>:""}
 
-						<p className="clearfix bor-bottom-greyE edu-back-white orderingbox">
 
+						<p className="clearfix bor-bottom-greyE edu-back-white orderingbox"
+						   style={positiontype}
+						>
 							   <span>温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存”</span>
 									<Button className="fr orderingbtnleft" type="primary">保存</Button>
 									<Button className="fr mr30 orderingbtnright">取消</Button>
-
-
 						</p>
 
 
@@ -170,6 +219,7 @@ class Ordering extends Component{
 										ref={provided.innerRef}
 										{...provided.droppableProps}
 										className={"educontent mb50 mt40 droppableul"}
+										onScroll={this.contentViewScrolledit}
 									>
 										{datas===undefined?"":
 											 datas.map((item, index) => {