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

[devonmather]

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]

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; }