Need a bit of help

[dagatsoin]

I just discovered this component but I can't get how to make it work.

I use React Storybook to work on my component. Is there any issue with it ? As it renders the component into a iframe?

Here is my component:

import React from 'react';
import injectSheet from 'react-jss';

import style from '../theme/splitView';

import Section from '../4-layouts/Section';
import View from '../0-atoms/View';
import Sticky from 'react-sticky-state';

const SplitView = ({sheet:{classes}, renderTop, renderMiddle, renderBottom}) =>
  <View className={classes.wzSplitView}>
    <Section className="topView">{renderTop()}</Section>
    <Sticky>
      <div className="sticky top" style={{top: "132px"}}>
        <View className="handleBar">{renderMiddle()}</View>
      </div>
    </Sticky>
    <Section className="bottomView" secondary>{renderBottom()}</Section>
  </View>;

export default injectSheet(style)(SplitView);

And two screen shots:

I excepting my middle tab bar to stays stick at the top but nothing happens. Event the class is not changing.

[joristruyen]

Same problem here.
I can see the sticky class is applied, but nothing happens when scrolling, nothing sticks, no classes are added.
Only thing I did was: Wrapping a div in a “Sticky" tag, added the default classes to css.
Do I forget something?

[huvber]

you should set the css to have top or bottom property like the reference behaviour
https://developer.mozilla.org/en/docs/Web/CSS/position#Sticky_positioning