將元素停靠在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

我相信我有一個指導您正確方向的想法。 這是我構造的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 });
    });
});