ThomasReggi的data-smart-affix在某些情况下(例如调整文档大小或粘贴列过高)无法正常工作。但这给了我一个简单的想法:在固定内容之前添加一个空元素,并使用它来获取偏移量。当调整大小时效果很好。
顺便一提,我还设置了元素的宽度为原始父级中的自然宽度。以下是我的解决方案:
$('[data-affix-after]').each( function() {
var elem = $(this);
var parent_panel = elem.parent();
var prev = $( elem.data('affix-after') );
if( prev.length != 1 ) {
prev = elem.before( '<div></div>' ).prev();
}
var resizeFn = function() {
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);
});
相关的 HTML 代码如下:
<div id='before-affix'></div><!-- leave this empty -->
<div data-affix-after='#before-affix'>
Put content to affix here.
</div>
或者
<div data-affix-after='#create'><!
Put content to affix here.
</div>
所需的CSS代码如下:
.affix { top: 0px },
.affix-bottom { position: absolute; }
如果您想禁用固定定位(例如当右侧栏被堆叠时),请使用以下CSS代码:
position: static !important;
.affix, .affix-bottom { position: static; }
在适当的媒体查询内部。
GI