我有 2 列布局,左侧有固定侧边栏,右侧有页面内容。我也有页脚。我希望我的固定侧边栏向右滚动到页面内容 div 末尾的坐标。
但是,如果侧边栏的高度大于页面内容的高度,我需要自动为页面内容 div 分配新的高度。此代码适用于第一种情况(内容高于侧边栏),但第二种情况仅在我再次重新加载页面时才有效(例如,当我从另一个页面转到这种页面时,脚本不会分配新的高度,但是当我重新加载页面时,它确实如此)
这是代码:
$(window).load(function(){
var windw = this;
var contentHeight = $('#content').height(); // fetch Сontent div height
var sideHeight = $('.sidebar-nav-fixed').height(); // fetch sidebar div height
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() >= pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 100
});
}
});
};
if (sideHeight > contentHeight) {
$('#content').css ({
height: contentHeight + (sideHeight - contentHeight)
}),
contentHeight = $('#content').height() // Assign a new height to page content div
}
$('.sidebar-nav-fixed').followTo(contentHeight - sideHeight);
});
如果您有任何想法,我将非常高兴谢谢!