Question

The idea:

I’m creating a div that will change to position:fixed once the top of the div touches the top of the browser window, so that the div appears to float. An example of this behavior and the code to make it work can be found here: Creating a sometimes fixed position element.

The problem:

The site where I’m implementing this code has a pretty hefty footer on it, so the position: fixed div, if the browser window is short enough, will scroll over the footer. The ideal behavior would be for the position: fixed div to not scroll past the footer and to instead bottom out. I haven’t gotten that far quite yet. Currently I’m doing a check for if the #fixie_container bottom is past the .footer_container top, if it is then I’m removing the position: fixed property from the #fixie_container by removing the .fixie_container_fixed class. This is causing problematic behavior though. Once the bottom of the #fixie_container is past the .footer_container top, the .fixie_container_fixed class is removed and then added rapidly causing the #fixie_container to flicker rapidly.

I obviously have a bug in my logic somewhere but, being new to JS/JQ, I’m not sure what it is. Any pointers would be greatly appreciated.

The HTML:

I have a page with a body and a small right column. The floating div is located at the bottom of the right column. When the top of the div hits the top of the viewtop, then the position: fixed attribute is applied.

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

The CSS:

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

The 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

Check out this jsFiddle: http://jsfiddle.net/pseudosavant/AFqBM/

I’m just making the header position:fixed when the document is scrolled past the header, and returning it back to position:relative (via a css class) when the user scrolls above the header or it reaches the top of the page. To make it stay behind the footer I set the footer to be z-index: 10000 and position:absolute and put it inside a container div that is position:relative so that it is still placed at the end of the page.

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>