html - 滚动到页面顶部时删除粘滞页脚
问题描述
我有粘性页脚,它出现在向下滚动时,当滚动位置刚好在页脚上方时,它不再是粘性的。我正在尝试编辑此代码,当页面滚动到顶部时它也会停止粘滞。
下面是代码:
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>
在这里提琴
解决方案
推荐阅读
- c# - 在 Dynamics 365 CRM 中创建潜在客户和销售文献之间的关系
- c++ - 如果我改变形状,Pytorch C++ (libtorch) 会输出不同的结果
- php - 无法在表格中显示 Ajax 数据
- html - 如何编辑此代码?谷歌地图 - 它应该是粘性的而不是浮动的
- javascript - 错误类型错误:无法读取角度 6 中未定义的属性“目标”---
- java - 版本 28 是旧支持库的最后一个版本,因此我们建议您迁移到 AndroidX 库
- robots.txt - 如何修复 robots.txt 未找到 404 错误。当网站在谷歌中被索引时
- jersey - 如何将对象注入需要 @context for Jersey / Dropwizard 的 AuthFilter
- python - 在烧瓶中提交后如何在同一页面上打印html表单详细信息?
- python - 如何从 python 将网站列表的状态导出为“是”或“否”到 csv?