Question

我有一个带页眉，正文和页脚的页面。页面底部还显示一个聊天面板，当页面滚动时浮动。

我已使用position:fixed; bottom:0px;，但聊天面板与页脚重叠。

如何让面板停止重叠页脚？我尝试将面板放在身体的div中但是没有用。

以下是一些示例代码：

<html>
<body>
  <div id="body">
    <div>
      Body content...
    </div>
    <div style="position:fixed;bottom:0px;right:100px;border:solid 1px black;background-color:orange;">
      This is the chat panel
    </div>
  </div>
  <div id="footer" style="background-color: gray;">This is the footer</div>
</body>
</html>

这里有两个预期行为的截图：在中间页面 midpage

到达底部时 bottom

Answer 1

这应该可行，并按照您的意愿行事。您可以优化它，以便在到达底部时与页脚一起平滑滚动。

http://jsfiddle.net/4cgyjpqt/3/

CSS：

body, html {
    margin: 0;
    padding: 0;
}
#footer {
    width: 100%;
    background-color: gray;
    height: 40px;
}
.panel {
    position:fixed;
    bottom:20px;
    right:100px;
    border:solid 1px black;
    background-color:orange;
}

jQuery的：

$(function () {
     var $win = $(window);

     $win.scroll(function () {
         if ($win.height() + $win.scrollTop() == $(document).height()) {
            // When the user is at the bottom of the page, get the footer height
             var footer = $('#footer').height();
             // set footer height as number of px from bottom
             $('.panel').css('bottom', footer);
         } else {
            // When the user is not at the bottom, set bottom back to 0px
             $('.panel').css('bottom', '0px');
         }
     });
 });

面板漂浮在div内

1 个答案: