scroll-creep v1.0.2

scroll-spy

A super simple scroll-spy component for React.

Usage

Supply the ids of elements you want to monitor while scrolling. The render callback provides the ids of the elements currently in view. Use that to style your navigation bar however you'd like.

import ScrollSpy from 'scroll-spy';

const elementIds = ['a', 'b', 'c']

const ScrollExample = () => (
  <div>
    <ScrollSpy elements={elementIds}>
      {(idsInView) => (
        <nav>
          {elementIds.map(id => (
            <div key={id} style={{ fontWeight: idsInView.includes(id) ? 'bold' : 'normal' }}>
              {id}
            </div>
          ))}
        </nav>
      )}
    </ScrollSpy>
    <main>
    {elementIds.map(id => (
      <div key={id}>{id}</div>
    ))}
    </main>
  </div>
)