我试图让一个 div 贴在窗口滚动的页脚上。我的代码几乎可以正常工作,但无法弄清楚缺少什么。
function checkOffset() {
var eTop = $('#footer').offset().top;
var chatTop = $('#chatArea').offset().top + $('#chat').innerHeight();
var zero = ($(window).innerHeight() + $(window).scrollTop());
var posFooter = eTop - zero;
var posChat = chatTop - zero;
if (posChat >= posFooter - 2) {
$('#chatArea').css('bottom', -posFooter);
} else {
$('#chatArea').css('bottom', 0);
}
console.log(posFooter);
}
$(document).scroll(function() {
checkOffset();
});
#wrapper {
height: 540px;
background-color: #ffffff;
}
#chatArea {
width: 100%;
position: fixed;
bottom: 0;
padding: 10px;
border: 1px solid red;
}
#footer {
background-color: #000000;
color: #ffffff;
padding: 20px;
border-top: 2px solid #007cdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
...
<div id="chatArea"></div>
</div>
<div id="footer"></div>
这是我为这个案例所做的 fiddle (包装器的高度只是为了这个例子)。 https://jsfiddle.net/v92qk4tn/
提前致谢。
最佳答案
我猜你只是想念一个 Id 名 #chatArea
https://jsfiddle.net/v92qk4tn/2/
关于javascript - 在页脚上粘贴 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39331116/