在页脚上粘贴div元素

Question

我正试图在窗口滚动上制作一个div to footer。 我的代码工作几乎正确，但无法弄清楚丢失的是什么。

 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> 

这是我为这种情况所做的小提琴（包装器的高度仅适用于此示例）。 https://jsfiddle.net/v92qk4tn/

提前致谢。

Answer 1

我想你只是想念睡觉的名字#chatArea https://jsfiddle.net/v92qk4tn/2/

Answer 2

刚想出如何使这项工作。

JS功能：

function checkOffset() {
    var eTop = $('#footer').offset().top;
    var zero = ($(window).innerHeight()+$(window).scrollTop());
    var posFooter = eTop - zero;

    if(posFooter <= 0) {
        $('#chatArea').css('bottom', -posFooter);
    }
    else {
        $('#chatArea').css('bottom', 0);
    }
}

感谢大家！