How to stop sticky div to overlap on footer?
<p>I have copied the code from different blog to my fiddle account. Everything is working fine. When you scroll down the page, yellow bar stick on the page and when you reach scroll to the bottom, footer pushes the yellow bar up which is absolutely fine. But issue is, when I add text boxes more than 10 to 15 times by clicking the “Add” button, the yellow bar overlap the footer and text boxes goes below inside the browser window and not visible. I want footer to push the yellow sticky bar up even its height small or large. Anyone can help me to sort out the issue?</p>

<p><a href="http://jsfiddle.net/awaises/k7xfc/" rel="nofollow">Demo is here http://jsfiddle.net/awaises/k7xfc/</a></p>

<p><strong>Jquery</strong></p>

<pre><code>$window = $(window),
$sidebar = $(".sidebar"),
sidebarTop = $sidebar.position().top,
sidebarHeight = $sidebar.height(),
$footer = $(".footer"),
footerTop = $footer.position().top,    
$sidebar.addClass('fixed');

$window.scroll(function(event) {
scrollTop = $window.scrollTop(),
topPosition = Math.max(0, sidebarTop - scrollTop),
topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
$sidebar.css('top', topPosition);
});

$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {

        $('&lt;div/&gt;',{'id':'TextBoxDiv' + counter}).html(
          $('&lt;label/&gt;').html( 'Textbox #' + counter + ' : ' )
        )
        .append( $('&lt;input type="text"&gt;').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
        .appendTo( '#TextBoxesGroup' )       
        counter++;
    });
});
</code></pre>
