Question

我使用了这个问题的顶级解决方案：Stop fixed position at footer保持一个固定条直到它进入页脚。一切都运行正常，除了在没有足够内容滚动的页面上。理想情况下，我希望固定栏位于页面顶部的页面上。但是，我认为我遇到了与我的页脚有关的问题，因为它有这些样式;

#footer {
  position: absolute
  bottom: 0 
}

我使用这些样式将页脚放在页面底部，内容很少。在这些页面上，我的固定栏隐藏在我的页脚后面。

以下是我所拥有的一切。

CSS

#footer {
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: #D9D9D9; /* light gray */
  color: #404040; /* gray */
  position: absolute;
}
#fixed {
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: #4B99D3;
} 
#fixed-parent {
  position: relative;
  margin-bottom: 50px;
}

的jQuery

$(document).scroll(function() {
  checkOffset();
});
function checkOffset() {
  if($('#fixed').offset().top + $('#fixed').height() >= $('#footer').offset().top - 10)
    $('#fixed').css('position', 'absolute');
  if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
    $('#fixed').css('position', 'fixed'); // restore when you scroll up
}

HTML

<div id="fixed-parent">
  <div id="fixed">
    fixed content...
  </div>
</div>
<div id="footer">
  footer content...
</div>

此处示例：http://jsfiddle.net/e5q04cv2/

获取固定栏以停止在页脚上方滚动的屏幕高度问题

0 个答案: