创建有时是固定位置的div，并出现JQ逻辑

Question

这个想法：

我正在创建一个将更改为position的div：在div的顶部接触到浏览器窗口的顶部时修复，从而使div似乎浮动。 可以在以下位置找到此行为的示例以及使该代码生效的代码： 创建有时是固定位置的元素。

问题：

我正在实现此代码的站点上的页脚相当大，因此位置：固定div（如果浏览器窗口足够短）将在页脚上滚动。 理想的行为是针对以下位置：固定div不能滚动到页脚上方，而可以移至最低点。 我还没走那么远。 目前，我正在检查#fixie_container底部是否超过.footer_container顶部，如果是，则通过删除.fixie_container_fixed类从#fixie_container中删除position：fixed属性。 但是，这导致了有问题的行为。 一旦#fixie_container的底部超过.footer_container顶部，则将删除.fixie_container_fixed类，然后快速添加该类，从而导致#fixie_container快速闪烁。

我的逻辑上显然有一个错误，但是对于JS / JQ还是陌生的，我不确定是什么。 任何指针将不胜感激。

HTML：

我的页面上有一个正文和一个小的右栏。 浮动div位于右列的底部。 当div的顶部到达顶部时，将应用position：fixed属性。

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

CSS：

#fixie_placeholder {
    position: relative;    
}
#fixie_container {
    z-index: 9999999;
    width: 300px;
}
div.fixie_container_fixed {
    position: fixed;
    top: 0;
}

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>

Answer 1

看看这个jsFiddle： http : //jsfiddle.net/pseudosavant/AFqBM/

我只是在将标题滚动到标题上方时使标题position:fixed ，并在用户滚动到标题上方或到达页面顶部时，将其返回到position:relative （通过css类）。 为了使其停留在页脚后面，我将页脚设置为z-index: 10000和position:absolute ，并将其放置在position:relative的容器div中，以便仍放置在页面的末尾。

Javascript：

$(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");            
        }            
    });
});

CSS：

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

HTML：

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