jQuery：使用addClass和removeClass时无法滚动到页面底部

Question

I have the following code that is adding the class "sticky" on scroll and removing the class "sticky" when the element reaches the anchor "#search-anchor".

However, I'm unable to scroll all the way down to see the full footer. Any ideas why?

https://jsfiddle.net/coldfusion/6z6q3kxm/2/

<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>

Answer 1

If you use the instruction debugger to pause the execution of JavaScript in the console, you get exactly what @mike-mccaughan is explaining.

You script adds and removes the element .inline-search from the document flow because of the CSS position:fixed; .

If you scroll down and re-add .inline-search to the document flow, the document height changes again and the scrollbar has some space, so your code that detects if we're at the bottom of the page doesn't work anymore. What happens is an infinite and very fast loop of adding and re-adding your fixed positioning: because of that, it seems as if the page "stops" scrolling before getting to the footer.

In order to create such an effect (fixed positioning upon scroll), I'd recommend using Bootstrap's affix jQuery plugin. Even further: Bootstrap recently announced that they're dropping Affix because of sticky positioning coming to CSS, so the real "future-proof" recommendation here would be to use sticky positioning with a polyfill to allow older browsers to have the same effect.

• Bootstrap affix : https://github.com/twbs/bootstrap/blob/master/js/affix.js , http://getbootstrap.com/javascript/#affix
• Bootstrap drops affix : https://github.com/twbs/bootstrap/blob/87751da48232ac4ca1964c819aaf89e78a3f9e64/docs/migration.md
• Sticky positioning : http://html5please.com/#sticky
• Sticky positioning demo : http://html5-demos.appspot.com/static/css/sticky.html - Sticky positioning availability accross browsers : http://caniuse.com/#feat=css sticky
• And a sticky positioning polyfill for older browsers : https://github.com/filamentgroup/fixed-sticky