我最近遇到了同样的问题，也在此处发布了我的解决方案：
使用位置时防止元素显示在页脚顶部：固定
您可以利用positionjQuery 的元素属性实现解决方案，在默认值 ( staticfor divs)fixed和absolute. 您还需要一个用于固定元素的容器元素。最后，为了防止固定元素越过footer，这个容器元素不能是footer的父元素。
javascript 部分涉及计算固定元素与文档顶部之间的像素距离，并将其与滚动条相对于窗口对象的当前垂直位置（即上方隐藏在可见区域的像素数）进行比较页面）每次用户滚动页面。当向下滚动时，固定元素即将消失在上方时，我们将其位置更改为固定并粘在页面顶部。
当我们滚动到底部时，这会导致固定元素越过页脚，尤其是在浏览器窗口很小的情况下。因此，我们将计算页脚距文档顶部的像素距离，并将其与固定元素的高度加上滚动条的垂直位置进行比较：当固定元素即将越过页脚时，我们将将其位置更改为绝对位置并停留在底部，就在页脚上方。
这是一个通用示例。
HTML 结构：
<div id="content">
<div id="leftcolumn">
<div class="fixed-element">
This is fixed
</div>
</div>
<div id="rightcolumn">Main content here</div>
<div id="footer"> The footer </div>
</div>
CSS：
#leftcolumn {
position: relative;
}
.fixed-element {
width: 180px;
}
.fixed-element.fixed {
position: fixed;
top: 20px;
}
.fixed-element.bottom {
position: absolute;
bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}
JS：
// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;
var fixedElementHeight = $('.fixed-element').height();
// Check every time the user scrolls
$(window).scroll(function (event) {
// Y position of the vertical scrollbar
var y = $(this).scrollTop();
if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
$('.fixed-element').addClass('fixed');
$('.fixed-element').removeClass('bottom');
}
else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
$('.fixed-element').removeClass('fixed');
$('.fixed-element').addClass('bottom');
}
else {
$('.fixed-element').removeClass('fixed bottom');
}
});