Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for elements to stick to the top right of the parent? #37

Open
devonmather opened this issue Mar 24, 2014 · 1 comment
Open

Comments

@devonmather
Copy link

If I set the css property for right to 0, the stuck element is flush against the browser window instead of the parent as would be expected for fixed elements. Elements stuck to the left work fine.

The solution I'm using is below but a more packaged solution would be ideal, is a bit troublesome with responsive design.

var wrapperObj = $('.wrapper');
var wrapperOffset = wrapperObj.offset();
var socialNavObj = $("#socialNav");
socialNavObj.stick_in_parent({
    parent: '.wrapper',
    offset_top: 60
})
.on("sticky_kit:stick", function(e) {
    socialNavObj.css('left', wrapperObj.outerWidth() + wrapperOffset.left);
})
.on("sticky_kit:unstick", function(e) {
    socialNavObj.css('left', 'auto');
});
@Ralfff
Copy link

Ralfff commented Nov 23, 2016

This is how I did it (CSS-only fix):
Use a relative positioned container element inside the parent as the sticky element. Make it:
.sticky-container { position: relative; margin: 0 auto; width: 100%; max-width: insert-your-content-width; height: 0; overflow-y: visible; }
This will stay in position when it changes to fixed. The container will be invisible and won’t cover content, because no height.
Inside, you can use absolute positioning to the right.
.element { position: absolute; right: 0; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants