javascript - 如何防止固定按钮与页脚区域重叠并将按钮停止在页脚所在位置的顶部

Question

我正在尝试创建一个固定在屏幕左下方的按钮。我尝试在 JSFiddle 中进行设置以重新创建我正在尝试做的事情。

这是我的 HTML:

<div id="header">header
</div>
<div id="button">button
</div>
<div id="content">some content
</div>
<div id="footer">footer
</div>

还有 CSS:

#header,#footer{
background-color:red;



}
#content
{
    height:2000px;
}
#footer
{
    height:200px;
}
#button
{
    background-color:gray;
    width:100px;
    height:100px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;    
}

我读过，我应该使用 scrolltoFixed.js、lockfixed.js 等插件但我的问题是我不知道如何使用，甚至不知道从哪里开始编辑 javascript。 Here is a fiddle

我希望按钮停在页脚所在的位置，并使其看起来像是停靠了。

Answer 1

现在已更新，使其位于页脚上方。

Hope this is what you meantjQuery:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
       $('#button').addClass('fixed_button');
   }else{
       $('#button').removeClass('fixed_button');
   }
});

CSS:

.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: auto !important;
}