javascript - 将元素停靠到 div 的底部以及屏幕底部

Question

老实说，我真的不知道如何解释我的问题。我试图将一个元素停靠到 div 的底部(效果很好)，但如果 div 的底部低于屏幕底部，它也应该停靠到屏幕底部。

例子:

<div id="slide" style="height:1000px">
    ...
    <div id="arrow-down">
        <i class="fa fa-arrow-down"></i>
    </div>
</div>
<div id="content">
    ...
</div>

我希望它如何表现:

+---+--------+---+
|   |        |   |
|   |        |   |
|   |        |   |
|   |   VV   |   |    // Docked to screen
+---+--------+---+
    |        |
    +--------+

    +--------+
    |        |
    |        |
    |        |
+---+--------+---+
|   |        |   |
|   |   VV   |   |    // Docked to DIV
|   +--------+   |
|                |
+----------------+

是否有纯 CSS 解决方案，或者我是否需要 JavaScript？我正在使用 Bootstrap 和 jQuery。

到目前为止我得到了什么:

#arrow-down {
    color: #FFF;
    position: absolute;
    bottom: 2%;
    left: 50%;
    z-index: 9999;
    font-size: 14px;
    line-height: 21px;
    font-family: Raleway, Open Sans, Arial, sans-serif;
    opacity: 1;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#arrow-down:hover {
    color: #F56D45;
    position: absolute;
    bottom: 2%;
    left: 50%;
    z-index: 50;
    font-size: 14px;
    line-height: 21px;
    font-family: Raleway, Open Sans, Arial, sans-serif;
    -webkit-transform: rotateY(720deg);
    -webkit-transform-style: preserve-3d;
    transform: rotateY(720deg);
    transform-style: preserve-3d;
}

Answer 1

我相信我有一个想法可以指导您朝着正确的方向前进。 Here is a jsFiddle我构造来说明一个容器停靠在屏幕底部，但当您滚动到 DIV 之外时停靠到 DIV 的底部。为了您的方便，我还将在下面指定 HTML、Javascript 和 CSS:

HTML

<div class="container">
    <div class="docked">
        I am docked.
    </div>
</div>

CSS

.container
{
    background: #ddd;
    width: 500px;
    height: 1000px;
    margin-bottom: 200px;
    position: relative;
}
.docked
{
    width: 150px;
    background: #fff;
    padding: 10px;
    margin: 10px;
    left: 50%;
    margin-left: -75px;
    margin-top: -20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
}

jQuery/Javascript

$(document).ready(function () {
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        var totalHeight = scroll + windowHeight;
        var containerHeight = $(".container").height();
        if (totalHeight > containerHeight)
            $(".docked").css({ bottom: totalHeight - containerHeight });
        else
            $(".docked").css({ bottom: 0 });
    });
});