Jquery 如何使固定元素与文档底部保持特定距离？

我有一个元素的位置：固定，底部：0px。 当我向下滚动页面时，这个元素应该跟随我，直到它接近页脚，比如说100px高度，我试图让元素停留在底部：0px，直到它到达页脚元素，在那一刻，它应该总是让页脚元素在它下面

这是我的css：

#backToTop{
    width:80px;
    height:50px;
    background:#333;
    color:#FFF;
    text-align:center;
    border-radius:10px 10px 0 0;
    padding-top:10px;
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:550px;
}

我研究了Jquery的

$（document.height（）

和

$（window.scrollTop（）

），试图找出某种条件，当元素的位置接近页脚时进行检测，但没有成功（页脚的高度是120）：

$（窗口）。滚动（函数（）{
如果（$（文档）.height（）-（$（窗口）.scrollTop（）+$（窗口）.height（））您可以使用新的
位置：sticky
属性来获得类似的结果

演示：
这是CSS代码，您要放置在fixed中的
必须从底部以100px的速度放置在页面流中：

CSS
我不知道实际的
位置：sticky
支持（我肯定它在Chrome上工作）但您可能会考虑在缺少时使用一些多边形填充。
尝试为#backToTop元素创建两个类，一个用于固定，另一个用于相对位置。当页脚到达视口时，#backToTop元素将其类更改为“相对”

HTML:

请看这里：

你能用你的html编写一个JSFIDLE示例吗？请用JSFIDLE编写您的示例，或者编写您的html代码…！这里，谢谢：，我成功了，现在的问题是元素到达页脚时错误地向右移动。抱歉，各位，链接错误，这是一个好链接：第一次打开并滚动它时移动到右边这正是我想要的！非常感谢@kapantzak。你的示例中唯一的问题是，如果我们缓慢向下滚动，元素返回顶部时会在与页脚接触时跳跃。我找到了一种方法，在元素到达页脚时更改底部值，我将在此处发布答案。谢谢很多，你真的帮了大忙！这是代码@kapantzak:，现在有些奇怪的事情发生了，一旦元素到达页脚，它就会向右移动几个像素！！！我看到代码工作正常..元素没有向右移动！你确定吗？哈哈！我才意识到我从来没有向你展示过我的代码。我做了一个到你的代码的链接。我在这里t是：当你第一次打开它并将其向右滚动时，这是2016年的电话。位置：sticky仍然没有得到广泛支持。它甚至在Chrome 37（）中被删除，除了“-webkit-”，这些供应商前缀都不存在。
$(window).scroll(function(){    
if($(document).height()-($(window).scrollTop()+$(window).height()) <= 120){
    $('#backToTop').css({'bottom':$(document).height()-($(window).scrollTop()+$(window).height())});
}else{
    $('#backToTop').css('bottom',0);
}
});

div{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 0px;
    line-height: 30px;
    background: gray;
}

<div id="container">
    <div id="backToTop" class="fixed_pos">Top</div>
    <footer>footer</footer>
</div>

#container {
width: 100%;
height: 1000px;
float: left;
}

#backToTop {
width:80px;
height:50px;
background:#333;
color:#FFF;
text-align:center;
border-radius:10px 10px 0 0;
padding-top:10px;    
left: 50%;
margin-left: -40px;
}

.fixed_pos {
position:fixed;
bottom:0;    
}

.relative_pos {
position: relative;
top: 100%;
}

footer {
width: 100%;
height: 200px;
float: left;
position: relative;
top: 100%;
background: #333;
color: #fff;
text-align: center;
}