本文介绍了如何防止固定按钮重叠页脚区域,并停止页脚所在位置顶部的按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个固定在屏幕左下方的按钮。我尝试在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 meantThe 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;
}
这篇关于如何防止固定按钮重叠页脚区域,并停止页脚所在位置顶部的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!