garthenweb / react-stickup

React components to stick elements at the top of the page while scrolling
http://garthenweb.github.io/react-stickup
MIT License
24 stars 4 forks source link

allow stacking of multiple `Sticky` components #7

Closed garthenweb closed 5 years ago

garthenweb commented 6 years ago

In situations where more than one Sticky component (beside the StickyScrollUp) should be in the display at the same time they need to have an additional offset to stack them. An easy approach would be to add a defaultOffsetY property to the Sticky component. More elegant would be when the components would be configurable to do this on there own without a manual step. This maybe needs to define an order.

For now, in case this feature is required, you may be able to fake it by passing the following css properties to the sticky element like:

const offset = 80;
const secondStickyNode = (
    <Sticky
        stickyProps={{
            style: {
                marginTop: offset,
                paddingBottom: -offset,
            }
        }
    >
        ...
    </Sticky>
);
garthenweb commented 6 years ago

defaultOffsetY was implemented to be able to set an offset to the header component, not to have an offset to the next Sticky component. To this is related, even if it does not the issue mentioned here.

garthenweb commented 5 years ago

Closing this because it was an idea I don't have any use case as of now. And even in case this changes the defaultOffsetTop property should be good enough to fake it.

In case someone has a need for this please comment, I am happy to reopen this again and discuss based on a real use case.