如何防止固定按钮重叠页脚区域，并停止页脚所在位置顶部的按钮 [英] How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

问题描述

我正在尝试创建一个固定在屏幕左下方的按钮。我尝试在JSFiddle中重新创建我想要做的事情。

I am trying to create a button that is fixed on the lower-left side of the screen. I tried to setup in JSFiddle to recreate what I'm trying to do.

这是我的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。
这里是一个小提琴

我

推荐答案

现在更新，以便它坚持以上页脚。

Updated now so that it sticks above footer.

希望这就是你的意思
jQuery：

Hope this is what you meant The jQuery:

$(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;
}

这篇关于如何防止固定按钮重叠页脚区域，并停止页脚所在位置顶部的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！