Is there a way to make a fixed position div relative to its parent div instead of the window using only CSS? I want a sticky block that follows the content while scrolling with the page, and stays in place even when the window is resized.
I know this can be easily achieved using JavaScript, as shown in the example code below:
function sticky() {
$('.sticky').css({ //sticky block
left : $('.container').offset().left + parseInt($('.container').css('width'))
});
}
sticky();
$(window).resize(function() {
sticky();
});
However, I'm concerned about performance issues on the page if relying on JS. Is there a pure CSS solution for achieving the same functionality?
Check out the JSFiddle demonstration here: http://jsfiddle.net/zcqbsrzf/