首页 > 解决方案 > 滚动到页面顶部时删除粘滞页脚

问题描述

我有粘性页脚,它出现在向下滚动时,当滚动位置刚好在页脚上方时,它不再是粘性的。我正在尝试编辑此代码,当页面滚动到顶部时它也会停止粘滞。

下面是代码:

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

}
$(document).scroll(function() {
  checkOffset();
});
div.float-parent {
  width: 100%;
  height: 1000px;
  background: #f8f8f8;
  position: relative;
}

div#float {
  width: 200px;
  left: 10px;
  bottom: 10px;
  background: #777;
  position: fixed;
}

div#footer {
  width: 100%;
  height: 200px;
  background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="float-parent">
  <div id="float">
    float...
  </div>
</div>
<div id="footer">
</div>

在这里提琴

标签: htmljquerycss

解决方案


推荐阅读