Jquery change position fixed to static based on viewport between two div

Problem

Im new to jquery.

I want to create a fixed bottom banner, and when i scroll down.. that banner will stop at the end of selected div that i want (in this case between "container-content-top" and "container-content-bottom" with smooth transition (not jumping like i did).

i already create using jquery,

 <script>
$(document).ready(function(){
    var topOfrel = $("#banner1").offset().top;
    var topOffooter = $("#container-content-bottom").offset().top - $("#banner1").height() - $("#header-nav").height() - 120;
    $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (topOffooter > y) {
            jQuery("#banner1").css("position", "fixed");

        } else {
            jQuery("#banner1").css("position", "static");
        }

    });
})
</script>

But it seems the banner will move into the position that i want (between 2 div) after certain px scroll. I already working on this for 3 days :(. I want the banner will not fixed and change to static to the position i want with smooth transition after i scroll and responsive too.

here's my full code : http://jsbin.com/IDonagi/1/edit?html,css,output

anyone have better solution ?
Thx before guys :)

Problem courtesy of: icaks

Solution

You want to trigger the switch when bottom border of browser window crosses the top position of #container-content-bottom. The correct code to determine them would be:

// topOffooter is the top offset of content after the banner.
// Have to add banner height here because its initial position is fixed,
// and therefore not counted when determining position of #container-content-bottom.
var topOffooter = $("#container-content-bottom").offset().top + $("#banner1").outerHeight();

...

// y is top offset of current bottom border of browser window
var y = $(window).scrollTop() + $(window).height();
Solution courtesy of: Leo Nyx

Discussion

Thanks for Leo,This is my solution for this problem,

<script>
        $(document).ready(function() {
            var topOfrel = $("#banner1").offset().top;
            var topOffooter = $("#container-content-bottom").offset().top + $("#banner1").outerHeight();
            $(window).scroll(function() {
                var y = $(window).scrollTop() + $(window).height();
                if (topOffooter > y) {
                    jQuery("#banner1").css("position", "fixed");

                } else {
                    jQuery("#banner1").css("position", "static");
                }

            });
        })
    </script>

and for mobile device ready i simply adda this to head :

<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale = 1.0,maximum-scale = 1.0" /> 

hope this help someone if needed :)

Discussion courtesy of: icaks

This recipe can be found in it's original form on Stack Over Flow.