1.Make headers banners to be replaced now. (Unitl implement better al…

…gorithms to make the collision more 'sticky' 2.Add in longer data in the array.
cht8687 · Jun 29, 2016 · f6f45ee · f6f45ee
1 parent ebb0e14
commit f6f45ee
Show file tree

Hide file tree

Showing 2 changed files with 214 additions and 4 deletions.
diff --git a/src/ReactListView.js b/src/ReactListView.js
@@ -73,7 +73,7 @@ export default class ReactListView extends Component {
 
   onScroll () {
     // update current header positions and apply fixed positions to the top one
-    let currentWindowScrollTop = 2 * this.state._headerFixedPosition - this.state._firstChildWrapper.getBoundingClientRect().top
+    let currentWindowScrollTop = this.state._headerFixedPosition - this.state._firstChildWrapper.getBoundingClientRect().top
     this.state._instances._originalPositions.forEach((c, index) => {
       let currentNode = c.headerObj.refs.header
       const currentHeaderHeight = parseInt(currentNode.style.height, 10)
@@ -84,19 +84,19 @@ export default class ReactListView extends Component {
         nextNode = this.state._instances._originalPositions[index + 1]
       }
       if (nextNode) {
-        topPos = -(currentWindowScrollTop + (index + 2) * currentHeaderHeight - nextNode.originalPosition - this.state._headerFixedPosition)
+        // temporily disable the clapsed effect
       }
       if (index === 0) {
         if (currentWindowScrollTop === c.originalPosition) {
           currentNode.style.position = ''
           ignoreCheck = true
         }
       }
-      if (!ignoreCheck && (c.originalPosition) < (currentWindowScrollTop + this.state._headerFixedPosition + currentHeaderHeight * 1)) {
+      if (!ignoreCheck && (c.originalPosition) < (currentWindowScrollTop + this.state._headerFixedPosition + currentHeaderHeight)) {
         Object.assign(currentNode.style, this.props.styles.fixedPosition)
         // apply top value
         currentNode.style.top = `${this.state._headerFixedPosition}px`
-        if (currentWindowScrollTop + (index + 2) * currentHeaderHeight > nextNode.originalPosition) {
+        if (currentWindowScrollTop + index * currentHeaderHeight > nextNode.originalPosition) {
           currentNode.style.position = 'absolute'
           currentNode.style.top = `${topPos}px`
         }

diff --git a/src/example/data.js b/src/example/data.js
@@ -83,6 +83,216 @@ export const DATA = [
         title: 'items6'
       }]
   },
+  {
+    headerName: 'ListE',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListF',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListG',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListH',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListI',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListJ',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListK',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListL',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListE',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
+  {
+    headerName: 'ListE',
+    items: [{
+      title: 'items1'
+    },
+      {
+        title: 'items2'
+      },
+      {
+        title: 'items3'
+      },
+      {
+        title: 'items4'
+      },
+      {
+        title: 'items5'
+      },
+      {
+        title: 'items6'
+      }]
+  },
   {
     headerName: 'ListE',
     items: [{