ThomasReggi's data-smart-affix didn't work for me in some corner cases (when resizing the document, or when the affixed column was too tall). But it gave me a simple idea: Add an empty element before the affixed content, and use that to get the offset. Works well when resized.
While I was at it, I also set the width of the element to be it's natural width in the original parent. Here's my solution:
$('[data-affix-after]').each( function() {
var elem = $(this);
var parent_panel = elem.parent();
var prev = $( elem.data('affix-after') );
if( prev.length != 1 ) {
/* Create a new element immediately before. */
prev = elem.before( '<div></div>' ).prev();
}
var resizeFn = function() {
/* Set the width to it's natural width in the parent. */
var sideBarNavWidth = parent_panel.width()
- parseInt(elem.css('paddingLeft'))
- parseInt(elem.css('paddingRight'))
- parseInt(elem.css('marginLeft'))
- parseInt(elem.css('marginRight'))
- parseInt(elem.css('borderLeftWidth'))
- parseInt(elem.css('borderRightWidth'));
elem.css('width', sideBarNavWidth);
elem.affix({
offset: {
top: prev.offset().top + prev.outerHeight(true),
bottom: $('body>footer').outerHeight(true)
}
});
};
resizeFn();
$(window).resize(resizeFn);
});
The HTML that goes with it is:
<div id='before-affix'></div><!-- leave this empty -->
<div data-affix-after='#before-affix'>
Put content to affix here.
</div>
or
<div data-affix-after='#create'><!-- any ID that doesn't exist -->
Put content to affix here.
</div>
The required CSS is:
.affix { top: 0px },
.affix-bottom { position: absolute; }
If you want to disable affix (e.g. when the right column is stacked), then use the CSS:
.affix, .affix-bottom { position: static; }
inside the appropriate media query.
GI