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

【问题标题】：How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located如何防止固定按钮重叠页脚区域并将按钮停止在页脚所在位置的顶部
【发布时间】：2013-08-05 08:04:13
【问题描述】：

我正在尝试创建一个固定在屏幕左下方的按钮。我尝试在 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

我希望按钮在页脚所在的位置停止，并使其像停靠时一样。

【问题讨论】：

我认为它在你的 jsFiddle 中工作......你到底想完成什么？ :)
对不起，我忘记通过重叠来提及这一点。我的意思是我会以某种方式停止滑动并在页脚开始的地方停止，并停留在那里。
他希望按钮不与页脚重叠，最好在页脚之前停止。
@lozadaOmr 用你想要的东西编辑你的问题..
我在我的答案中添加了一个新的小提琴，请看一下:)

标签： javascript html css

【解决方案1】：

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

Hope this is what you meant 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;
}

【讨论】：

@BeatAlex 谢谢你，这就是我想要完成的。会试试这个。
@BeatAlex ，我注意到 JavaScript 附加了 fixed_button 类和属性 margin-top。但是，我认为当内容区域动态扩展时我会遇到问题，比如说来自 PHP。

【解决方案2】：

改用绝对定位。另外，不要使用 left:0 和 right:0。仅使用其中一种。试试

position:absolute;
bottom:0;
left:0;

编辑：抱歉，您的代码似乎有效。你到底想做什么？

【讨论】：

我忘了提到我希望按钮在到达页脚区域时停止。我已经阅读了此处提供的有关堆栈溢出的各种解决方案，但我认为我离实现我想要做的事情越来越近了。
啊。我会为此推荐Javascript。尝试使用 jquery；它有你可以使用的滚动事件监听器。实际上，jQuery 通常是最简单、最灵活的库之一。
user2652246：您能推荐一个网站吗？我可以从哪里开始？我没有使用 JavaScript 或 jQuery 的经验。
天哪。好吧，在真正的网站上工作之前，我建议首先至少学习 Javascript。 net.tutsplus.com 和 w3schools.com 是我开始学习的地方。此外，jQuery 文档：api.jquery.com。如果你在那里搜索“滚动”，你会看到有一个 onScroll 功能。
没问题！ :) 我们都经历了最初几个月的尴尬学习。

【解决方案3】：

我一直在寻找类似的东西，但在这里找不到任何合适的答案。

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

所以现在固定元素会在页脚之前停止。并且不会与它重叠。

【讨论】：