Javascript 创建有时固定位置的div，与JQ逻辑有关

这个想法：

我正在创建一个div，它将更改为position:fixed，只要div的顶部接触到浏览器窗口的顶部，该div就会浮动。可在此处找到此行为的示例以及使其工作的代码：

问题是：

我实现这段代码的站点有一个相当大的页脚，所以如果浏览器窗口足够短，那么位置：fixed div将在页脚上滚动。理想的行为是：fixed div不滚动到页脚，而是从底部向外滚动。我还没走那么远。目前，我正在检查#fixie_容器底部是否超过.footer_容器顶部，如果是，则通过删除.fixie_容器的fixed类，从#fixie_容器中删除position:fixed属性。但这会导致问题行为。一旦#fixie_容器的底部超过了.footer_容器的顶部，就会删除并快速添加.fixie_container_fixed类，从而导致#fixie_容器快速闪烁

很明显，我的逻辑中有一个bug，但是，作为JS/JQ的新手，我不确定它是什么。任何指点都将不胜感激

HTML：

我有一个页面，有一个正文和一个右小栏。浮动div位于右列的底部。当div的顶部碰到viewtop的顶部时，将应用“位置：固定”属性

<div id="fixie_placeholder">
    <div id="fixie_container">
        THIS CONTENT WILL HOVER                    
    </div>
</div>
<div class="footer_container">
    THIS IS THE FOOTER
</div>

JQuery：

<script type="text/javascript">
jQuery(function($){

    var placeholder = $("#fixie_placeholder");
    var container = $("#fixie_container");
    var block = $(".footer_container");
    var view = $(window);

    view.bind("scroll resize", function(){

        var placeholderTop = placeholder.offset().top;
        var containerBottom = container.offset().top + container.height();
        var blockTop = block.offset().top;
        var viewTop = view.scrollTop();

        if ((viewTop > placeholderTop) && !container.is(".fixie_container_fixed") && (containerBottom < blockTop)){

            placeholder.height(placeholder.height());

            container.addClass("fixie_container_fixed");

        } 
        else if ((viewTop <= placeholderTop) && container.is(".fixie_container_fixed") || (containerBottom >= blockTop)){

            placeholder.css("height", "auto");

            container.removeClass("fixie_container_fixed");

        }
    });

});
</script>

jQuery（函数（$）{
变量占位符=$（“固定占位符”）；
变量容器=$（“固定容器”）；
变量块=$（“.footer_容器”）；
变量视图=$（窗口）；
view.bind（“滚动调整大小”，函数（）{
var placeholder top=placeholder.offset（）.top；
var containerBottom=container.offset（）.top+container.height（）；
var blockTop=block.offset（）.top；
var viewTop=view.scrollTop（）；
如果（（视图顶部>占位符顶部）&&！container.is（“.fixie\u container\u fixed”）&&（containerBottom

查看此JSFIDLE：

当文档滚动过标题时，我只是将标题设置为

position:fixed

，当用户滚动到标题上方或到达页面顶部时，将其返回到

position:relative

（通过css类）。为了使页脚保持在页脚后面，我将页脚设置为

z-index:10000

和

position:absolute

，并将其放在一个容器div中，该容器div为

position:relative

，这样它仍然放在页面的末尾

Javascript: CSS: HTML:

标题
高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

高脚

<script type="text/javascript">
jQuery(function($){

    var placeholder = $("#fixie_placeholder");
    var container = $("#fixie_container");
    var block = $(".footer_container");
    var view = $(window);

    view.bind("scroll resize", function(){

        var placeholderTop = placeholder.offset().top;
        var containerBottom = container.offset().top + container.height();
        var blockTop = block.offset().top;
        var viewTop = view.scrollTop();

        if ((viewTop > placeholderTop) && !container.is(".fixie_container_fixed") && (containerBottom < blockTop)){

            placeholder.height(placeholder.height());

            container.addClass("fixie_container_fixed");

        } 
        else if ((viewTop <= placeholderTop) && container.is(".fixie_container_fixed") || (containerBottom >= blockTop)){

            placeholder.css("height", "auto");

            container.removeClass("fixie_container_fixed");

        }
    });

});
</script>

$(document).ready(function(){
    $(window).bind("scroll resize", function(){
        var scrollTop = $(window).scrollTop();
        var headerTop = $("#header").offset().top;

        if (scrollTop >= headerTop && scrollTop !== 0) { // Scrolled past top of header, but not at the top of the page
            $("#header").addClass("fixed");
        } else {
            $("#header").removeClass("fixed");            
        }            
    });
});

#container { padding-top: 25px; }
#header, #content, #footer { width: 400px; }
#header { z-index: 9999; top: 0;
          background: blue; }
#header.fixed { position: fixed; }
#content { background: green; }
.box { width: 300px; height: 300px; background: purple; display: inline-block; }
#footerContainer { height: 400px; position: relative; }
#footer { background: red; z-index: 10000; position: absolute; }

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="content">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div id="footerContainer">
        <div id="footer">
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
        </div>
    </div>
</div>