Javascript JQuery:使用addClass&；时无法滚动到页面底部；移除类

我有下面的代码，在scroll上添加类“sticky”，并在元素到达锚点“#search anchor”时删除类“sticky”

但是，我无法一直向下滚动以查看完整的页脚。你知道为什么吗

页眉、页脚{高度：50px；背景色：红色；}
部分{高度：50px；背景色：黄色；}
#搜索锚{背景颜色：蓝色；}
.body{高度：1600px；背景色：黑色；}
.粘的{
位置：固定；
底部：0px；
宽度：1000px；
右边距：自动！重要；
左边距：自动！重要；
z指数：999；
}
jQuery（文档）.ready（函数（）{
var a=jQuery（“.inline search”）.offset（）.top，
n=函数（）{
var n=jQuery（window）.scrollTop（），
n=n+10；
n>a？jQuery（“.inline search”）.addClass（“sticky”）：jQuery（“.inline search”）.removeClass（“sticky”）
};
n（），jQuery（窗口）。滚动（函数（）{
n（）
})
}),
jQuery（文档）.ready（函数（）{
变量搜索=$（“.inline搜索”）；
$（窗口）。滚动（函数（）{
var anchorPosition=$（“#搜索锚”）.offset（）.top；
var navHeight=$（“.inline search”）.height（）；
var navPosition=$（“.inline search”）.offset（）.top；
如果（（导航位置+导航高度）>=锚点位置）{
search.removeClass（'sticky'）；
}
})
});
标题
页脚

如果您使用指令

调试器

在控制台中暂停JavaScript的执行，您将得到@mike mccaughan所解释的内容

由于CSS

位置：fixed，您可以在文档流中添加和删除元素
。内联搜索

如果向下滚动并将
.inline search
重新添加到文档流中，文档高度会再次更改，滚动条会有一些空间，因此检测我们是否位于页面底部的代码不再工作。所发生的是一个无限且非常快速的添加和重新添加固定位置的循环：因此，页面似乎在到达页脚之前“停止”滚动

为了创建这样的效果（滚动时的固定位置），我建议使用Bootstrap的粘贴jQuery插件。更进一步：Bootstrap最近宣布，由于CSS中出现了粘性定位，他们正在放弃粘贴，因此这里真正的“未来证明”建议是使用粘性定位和多边形填充，以允许旧浏览器具有相同的效果


引导粘贴：，

引导下降：
粘性定位：
粘性定位演示：-粘性定位可用性跨浏览器：粘性
对于较旧的浏览器，还有一个粘性定位多边形填充：
为什么要使用2 ready功能？您可以一直向下滚动，但页脚的高度为50像素，这使得它可以tiny@denisol-您可以调整页脚的高度，但仍无法向下滚动至底部。查看右侧的滚动条。您无法将其排到底。请在问题本身中提供所有相关代码，而不是在第三方网站上提供。这可能是因为您正在将
的
位置更改为
。内联搜索将
更改为
固定的
，从而将其从流中拉出，降低了高度。当您向下滚动到“底部”时，您将删除该
位置
，将其重新引入流并增加高度。由于某些原因，浏览器没有更新滚动条以允许该更改。
<style>
header,footer {height:50px;background-color:red;}
section {height: 50px; background-color: yellow;}
#search-anchor {background-color:blue;}
.body {height:1600px;background-color:black;}
.sticky {
   position: fixed;
   bottom: 0px;
   width: 1000px;
   margin-right: auto !important;
   margin-left: auto !important;
   z-index: 999;
}
</style>

<script>

    jQuery(document).ready(function() {
    var a = jQuery(".inline-search").offset().top,
        n = function() {
            var n = jQuery(window).scrollTop(),
                n = n + 10;
            n > a ? jQuery(".inline-search").addClass("sticky") : jQuery(".inline-search").removeClass("sticky")
        };
    n(), jQuery(window).scroll(function() {
        n()
    })
}),

jQuery(document).ready(function() {
    var search = $(".inline-search");
    $(window).scroll(function() {
        var anchorPosition = $("#search-anchor").offset().top;
        var navHeight = $(".inline-search").height();
        var navPosition = $(".inline-search").offset().top;

        if ((navPosition + navHeight) >= anchorPosition) {
            search.removeClass('sticky');
        }

    })
});

</script>

<header>HEADER</header>
<section class="inline-search">
</section>
<div class="body"></div>
<section id="search-anchor">
</section>
<footer>FOOTER</footer>