将元素停靠在div的底部以及屏幕的底部

Question

To be honest, I don't really know how to explain my problem. I'm trying to dock an element to the bottom of a div (which works great), but it should also dock to the bottom of the screen if the bottom of the div is below the bottom of the screen.

Example:

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

How I'd like it to behave:

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

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

Is there a pure CSS solution or do I need JavaScript for that? I'm using Bootstrap and jQuery.

What I've got so far:

#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

I believe I have an idea to guide you in the right direction. Here is a jsFiddle I constructed to illustrate a container being docked at the bottom of the screen, but docking to the bottom of a DIV when you scroll beyond the DIV. For your convenience I'll also specify the HTML, Javascript and CSS below:

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 });
    });
});