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

我正在尝试创建一个固定在屏幕左下方的按钮。我尝试在JSFIDLE中进行设置，以重新创建我正在尝试执行的操作

这是我的HTML：

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

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

---

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

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

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

编辑：

---

抱歉，您的代码似乎正常。您到底想做什么？

现在已更新，以便粘贴在页脚上方

jQuery：

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

CSS:

---

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

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));
    }

---

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

我认为它在您的JSFIDLE中工作。。。你到底想完成什么？：）对不起，我忘了重复提到那件事了。我的意思是，我会以某种方式停止滑动，并停在页脚开始的地方，然后留在那里。他希望按钮不要与页脚重叠，最好停在页脚之前。@lozadaOmr用你想要的内容编辑你的问题。我在我的答案中添加了一个新的提琴，请看一看：）我忘了提到我希望我的按钮在点击页脚区域时停止。我已经阅读了这里提供的关于堆栈溢出的各种解决方案，但我不认为我离实现我要做的事情越来越近了。为此，我建议使用Javascript。尝试使用jquery；它有可供滚动使用的事件侦听器。实际上，jQuery通常是最简单、最灵活的库之一。user2652246：您能推荐一个我可以从那里开始的站点吗？我没有使用JavaScript或jQuery的经验。在开发真正的网站之前，我建议首先学习Javascript。net.tutsplus.com和w3schools.com是我开始学习的地方。另外，jQuery文档：api.jQuery.com。如果您在那里向上搜索“滚动”，您将看到一个onScroll函数。没问题！：）我们都经历了最初几个月的尴尬学习。@BeatAlex谢谢你，这就是我想要实现的。我会试试这个。@BeatAlex，我注意到JavaScript附加了fixed_button类，并且属性边距位于顶部。但是，我认为当内容区域动态扩展（比如说来自PHP）时，我会遇到问题。

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

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));
    }