scroll in search result

src/components/search/search-result.js

@@ -32,7 +32,9 @@ class SearchResult extends PureComponent {
         searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
         fixedHeader: false,
         searchHeadStyle: {top: 0},
-        swipeDirection: this.swipeUp
+        swipeDirection: this.swipeUp,
+        isHide: false,
+        basicTop: 0
     }
 
     componentDidMount() {
@@ -76,61 +78,65 @@ class SearchResult extends PureComponent {
     }
 
     handleScroll = throttle(() => {
-        let y = window.scrollY, 
-            headY = this.searchHead.current.offsetTop;
-        console.log(headY,'headY');
-        console.log(document.querySelector('body').offsetHeight);
-        // 向上滑动
-        if (y < this.prevScrollY && y > 0) {
-            console.log(0);
-            console.log(this.state.swipeDirection);
-
-            if (this.state.swipeDirection === this.swipeDown) {
-        console.log(1);
-
-                y <= headY && this.state.searchHeadStyle.position !== 'fixed' && 
-                this.setState({
-                    searchHeadStyle: {
-                        top: `0`,
-                        position: 'fixed'
-                    }
-                })
-            } else {
-        console.log(2);
-
-                this.setState({
-                    swipeDirection: this.swipeDown
-                }, () => {
-                    if (this.state.swipeDirection === this.swipeDown) {
-                        let h = y > document.querySelector('body').offsetHeight? document.querySelector('body').offsetHeight: y;
-                        let h1 = this.searchHead.current.offsetHeight
+        let y = window.scrollY < 0? 0 : window.scrollY, 
+            headY = this.searchHead.current.offsetTop,
+            h = this.searchHead.current.offsetHeight;
+        if(y > this.prevScrollY) {
             this.setState({
                 searchHeadStyle: {
-                                    // top: `${h > headY ? h - h1 : h}px`
-                                    top: `${y}px`
-                                }
-                            })
-                        
-                        
+                    top : `${-h}px`
                 }
-                })
+            });
         }
-        } else {
-            console.log(3);
-            this.state.swipeDirection !== this.swipeUp &&
+        if(y < this.prevScrollY) {
             this.setState({
-                swipeDirection: this.swipeUp,
                 searchHeadStyle: {
-                    position: 'absolute',
-                    top: `${y}px`
+                    top: 0
                 }
-            })
+            });
         }
+        // if (y < this.prevScrollY) {
+        //     if (this.state.swipeDirection === this.swipeDown) {
+        //         y <= headY && this.state.searchHeadStyle.position !== 'fixed' && 
+        //         this.setState({
+        //             searchHeadStyle: {
+        //                 top: `0`,
+        //                 position: 'fixed'
+        //             }
+        //         })
+        //     } else {
+        //         this.setState({
+        //             swipeDirection: this.swipeDown
+        //         }, () => {
+        //             if (this.state.swipeDirection === this.swipeDown) {
+        //                 let h = y > document.querySelector('body').offsetHeight? document.querySelector('body').offsetHeight: y;
+        //                 let h1 = this.searchHead.current.offsetHeight
+        //                     this.setState({
+        //                         searchHeadStyle: {
+        //                             // top: `${h > headY ? h - h1 : h}px`
+        //                             top: `${y}px`
+        //                         }
+        //                     })
+                        
+                        
+        //             }
+        //         })
+        //     }
+        // } else {
+        //     this.state.swipeDirection !== this.swipeUp &&
+        //     this.setState({
+        //         swipeDirection: this.swipeUp,
+        //         searchHeadStyle: {
+        //             position: 'absolute',
+        //             top: `${y}px`
+        //         }
+        //     })
+        // }
         this.prevScrollY = y;
     }, 0)
 
     render() {
-        const {courseList} = this.state
+        const { courseList, isHide } = this.state;
 
         return (
             <div
@@ -142,6 +148,7 @@ class SearchResult extends PureComponent {
                     searchHistory={this.state.searchHistory}
                     style={this.state.searchHeadStyle}
                     ref={this.searchHead}
+                    isHide={isHide}
                 />
                 {
 

src/components/search/search-result.scss

 .search-result {
     padding-top: 44px;
 
-    .search-head{
-        position: absolute;
+    .search-head {
+        // position: absolute;
+        position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 10;
+        transition: top 0.5 ease;
+
+        &.hide {
+            top: -44px;
+        }
     }
 
     ul {

src/components/search/searchHead.js

@@ -41,6 +41,7 @@ class SearchHead extends PureComponent {
         const { isFocus } = this.state;
         const cls = classnames('submit-btn', {'submit-btn--active': isFocus})
         return (
+            
             <div className="search-head" style={this.props.style} ref={this.props.forwardedRef}>
 
                 <div className="left" onClick={this.returnPage}>