Sticky component not sticky

Hey there. Maybe I’m doing something wrong, I’m not entirely sure, but it seems that, after following your basic demo code, I ain’t able to create a navigation bar that sticks to the left side of my page. This is the page as it is now (without the sticky component): If I start scrolling down, it won’t follow the viewport, of course. However, I tried installing and recreating your example, with little to no successful results.

Instead of having my MenuButtons, MenuTrees and MenuItems directly on the return part of the render() method, I created a const that has essentially the same content (sorry for the verbose response): const navbar = ( <div> <StickyContainer style={{ zIndex: 2 }}> <Sticky> {({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => { return ( <div> <MenuButton path='/profile' label='Profile' icon='user-secret' /> <MenuTree path='/dashboards' label='Dashboards' icon='tachometer' level='second'> <MenuTree path='/dashboards' label='Central Refrigeração' level='third' > <MenuItem path='/dashboards/centralRefrig/synotic' label='Synotic' /> <MenuItem path='/dashboards/centralRefrig/charts' label='Charts' /> <MenuItem path='/dashboards/centralRefrig/parameters' label='Parameters' /> </MenuTree> </MenuTree> <MenuTree path='/alarms' label='Alarmistic' icon='exclamation-triangle' level='second' > <MenuItem path='/alarms' label='Alarms' /> <MenuItem path='/alarmsHistory' label='Alarms History' /> <MenuItem path='/alarmManager' label='Alarm Manager' /> </MenuTree> <MenuTree path='/checkLists' label='Check Lists' icon='check-circle' level='second' > <MenuItem path='/checkLists' label='Check List' /> <MenuItem path='/checkListHistory' label='Check List History' /> <MenuItem path='/checkListManager' label='Check List Manager' /> </MenuTree> <MenuTree path='/userManager' label='User Manager' icon='users' level='second'> <MenuTree path='/preferences' label="User Preferences" icon='cogs' level='third'> <MenuItem path='/severities' label='Severities' /> </MenuTree> </MenuTree> <MenuTree path='/task' label='Task Manager' icon='tasks' level='second'> <MenuItem path='/createTask' label='Create Task' /> <MenuItem path='/myTasks' label='My Tasks' /> <MenuItem path='/tasksHistory' label='Tasks History' /> </MenuTree> <MenuTree path='/plant' label='Plant Manager' icon='cog' level='second'> <MenuItem path='/profile' label='Profile' /> <MenuItem path='/profileEditor' label='Editor' /> <MenuItem path='/team' label='Team' /> </MenuTree> </div> ) }} </Sticky> </StickyContainer> </div> )

Then, I simply reference this const on the return part, and wait for the results. They are as follows: Even worse, the navbar isn’t sticky…

Do you have any idea why this happens? Thanks, Gil

[maecapozzi]

I took the liberty of reformatting your code so that it’s a bit more parseable.

const navbar = (<div>
  <StickyContainer style={{ zIndex: 2 }}>
    <Sticky> {({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => {
      return (
        <div>
          <MenuButton path='/profile' label='Profile' icon='user-secret' />
          <MenuTree path='/dashboards' label='Dashboards' icon='tachometer' level='second'>
            <MenuTree path='/dashboards' label='Central Refrigeração' level='third' >
              <MenuItem path='/dashboards/centralRefrig/synotic' label='Synotic' />
              <MenuItem path='/dashboards/centralRefrig/charts' label='Charts' />
              <MenuItem path='/dashboards/centralRefrig/parameters' label='Parameters' />
            </MenuTree>
          </MenuTree>
          <MenuTree path='/alarms' label='Alarmistic' icon='exclamation-triangle' level='second' >
            <MenuItem path='/alarms' label='Alarms' /> <MenuItem path='/alarmsHistory' label='Alarms History' />
            <MenuItem path='/alarmManager' label='Alarm Manager' />
          </MenuTree>
          <MenuTree path='/checkLists' label='Check Lists' icon='check-circle' level='second' >
            <MenuItem path='/checkLists' label='Check List' />
            <MenuItem path='/checkListHistory' label='Check List History' />
            <MenuItem path='/checkListManager' label='Check List Manager' />
          </MenuTree>
          <MenuTree path='/userManager' label='User Manager' icon='users' level='second'>
            <MenuTree path='/preferences' label="User Preferences" icon='cogs' level='third'>
              <MenuItem path='/severities' label='Severities' />
            </MenuTree>
          </MenuTree>
          <MenuTree path='/task' label='Task Manager' icon='tasks' level='second'>
            <MenuItem path='/createTask' label='Create Task' />
            <MenuItem path='/myTasks' label='My Tasks' />
            <MenuItem path='/tasksHistory' label='Tasks History' />
          </MenuTree>
          <MenuTree path='/plant' label='Plant Manager' icon='cog' level='second'>
            <MenuItem path='/profile' label='Profile' />
            <MenuItem path='/profileEditor' label='Editor' />
            <MenuItem path='/team' label='Team' />
          </MenuTree>
        </div>)
    }}
    </Sticky>
  </StickyContainer>
</div>)

[vcarl]

The login doesn’t work for me, it redirects me to login. The StickyContainer must be taller that the element that it contains, and divs between the Sticky and StickyContainer can cause issues with the styles applying correctly.

I don’t think this is a bug in the library, and I don’t have a lot of extra time to help you debug each step of implementation. I’m going to close this out, if you can get a reproduction that I can access, feel free to ping me (vcarl) in Reactiflux’s #need-help channel! Chat is a better medium than issues for detailed help.