Merge pull request #37 from makotot/offset

Offset option

Author: makotot

README.md

@@ -60,6 +60,10 @@ HTML tag for Scrollspy component if you want to use other than `ul` [optional].
 
 Style attribute to be passed to the generated <ul/> element [optional]. 
 
+### `offset={ Number }`
+
+Offset value that adjusts to determine the elements are in the viewport.
+
 ## Development
 
 ```sh

src/js/app.jsx

@@ -11,6 +11,8 @@ const App = React.createClass({
       minHeight: '600px',
     }
 
+    const version = require('../../package.json').version
+
     return (
       <div className="o-wrapper">
 
@@ -19,7 +21,13 @@ const App = React.createClass({
             <h2 className="c-side-nav__heading c-heading-4 c-heading-4--upper u-font-italic">react<br />scrollspy</h2>
           </div>
           <nav className="c-side-nav__body">
-            <Scrollspy items={ ['section-1', 'section-2', 'section-3'] } currentClassName="is-current" className="c-side-nav__list nav-list" style={ {fontWeight: 300} }>
+            <Scrollspy
+              items={ ['section-1', 'section-2', 'section-3'] }
+              currentClassName="is-current"
+              className="c-side-nav__list nav-list"
+              style={ {fontWeight: 300} }
+              offset={ -20 }
+            >
               <li className="c-side-nav__item"><a href="#section-1" className="c-side-nav__link">Getteing Started</a></li>
               <li className="c-side-nav__item"><a href="#section-2" className="c-side-nav__link">Example</a></li>
               <li className="c-side-nav__item"><a href="#section-3" className="c-side-nav__link">Props</a></li>
@@ -37,7 +45,7 @@ const App = React.createClass({
                     <span className="o-hero__sub-heading c-lead">Scrollspy Component</span>
                   </li>
                   <li className="o-inline-list__item">
-                    <span className="c-tag">v2.3.1</span>
+                    <span className="c-tag">v{ version }</span>
                   </li>
                 </ul>
               </div>
@@ -114,6 +122,10 @@ const App = React.createClass({
                         <td className="c-table__data">style</td>
                         <td className="c-table__data">Style attribute to be passed to the generated <code>{'<ul/>'}</code> element [optional].</td>
                       </tr>
+                      <tr>
+                        <td className="c-table__data">offset</td>
+                        <td className="c-table__data">Offset value that adjusts to determine the elements are in the viewport [optional].</td>
+                      </tr>
                     </tbody>
                   </table>
                 </div>

src/js/lib/Scrollspy.jsx

@@ -8,13 +8,17 @@ export class Scrollspy extends React.Component {
       currentClassName: React.PropTypes.string.isRequired,
       style: React.PropTypes.object,
       componentTag: React.PropTypes.string,
+      offset: React.PropTypes.number,
     }
   }
 
   static get defaultProps () {
     return {
       items: [],
       currentClassName: '',
+      style: {},
+      componentTag: 'ul',
+      offset: 0,
     }
   }
 
@@ -90,7 +94,7 @@ export class Scrollspy extends React.Component {
     const doc = document
     const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop
     const scrollBottom = scrollTop + winH
-    const elTop = rect.top + scrollTop
+    const elTop = rect.top + scrollTop + this.props.offset
     const elBottom = elTop + el.offsetHeight
 
     return (elTop < scrollBottom) && (elBottom > scrollTop)
@@ -146,7 +150,7 @@ export class Scrollspy extends React.Component {
   }
 
   render () {
-    const Tag = this.props.componentTag || 'ul'
+    const Tag = this.props.componentTag
     let counter = 0
     const items = React.Children.map(this.props.children, (child, idx) => {
       if (!child) {