Sticky component not sticky
Closed this issue · 5 comments
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
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>)
@gilnetoglartek I'm having a bit of trouble understanding the expected behavior. Would you mind sharing a gif or a video of what this looks like now?
It would also be really helpful if you put this code in a codepen or a JSFiddle so I could tweak it.
I'll also share a basic example of how I think this should work. I hope it at least guides you in the right direction.
<StickyContainer style={{ zIndex: 2 }}>
<Sticky>
{({ style }) => {
return <Navigation style={style} />
}}
</Sticky>
</StickyContainer>
If you pull all of your <MenuItem> components and <MenuTree /> components into a component called Navigation, it will be a lot easier for you to find the issue in your code.
Hey @gilnetoglartek I don't see the style value that's coming in as an argument being applied anywhere in the DOM being returned. Does it work if you add it to the div wrapping your menu items?
Hi everyone,
Thanks for your answers.
@maecapozzi I've edited my code as to have a component being called from the Sticky context, as you shown. I've also corrected this to pass on the style parameter, as it wasn't, and as was referred by @vcarl . As such, This is the Sticky part of the code:
`class Navbar extends PureComponent {
render() {
const user = this.props.userProfile || null
return (
<StickyContainer style={{ zIndex: 0 }}>
<Sticky>
{({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => {
console.log({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight })
return <Navigation user={user} style={style} />
}}
</Sticky>
</StickyContainer>
)
}
}`
Unfortunately, this wasn't enough to get this working, but at least the navigation bar is being rendered correctly (so the second screenshot I sent earlier doesn't apply anymore).
Now, the only thing that happens is that the navigation bar isn't sticky. Simple as that.
What I'm seeing is that I have a content pretty similar to the one posted on the 'Basic' example (here) in regard to the Sticky part. The main difference is that, for some reason, the 'isSticky' flag is never changing to true after scrolling, which happens in the mentioned example.
I've even tried removing all the className references to inner elements, as to eliminate any change these might do to the Sticky component, but to no avail.
What am I doing wrong? How can I help you to further analyze this?
You can access the application through this endpoint: http://frontend.glarconnect.com
If you login with test/test, and scroll down, you'll see the navbar doesn't follow. For the time being, I've deployed a version where you can see all the flags being passed through the Sticky component on the console log.
Thanks,
Gil
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.