How can I hide the navigation bar with Jquery?

Question

I am trying to hide the navigation under the footer using Jquery.

I mean, I want to show the navigation until it reaches footer stage. Then, I want to hide it.

How can I do it? or Should I use z-index in state of jquery?

Code and example : http://jsfiddle.net/yn8r4/1/

I would appreciate any kind of help. Thanks!

NOTE

I am adding a FIXED position to the navigation with Jquery and I do need the site to looks like: http://jsfiddle.net/yn8r4/1/ and NOT like here: http://jsfiddle.net/yn8r4/14/

Live Example

I have found a live example of what I am trying to do Here

When you scroll down you would see navigation on the left. Believe, He is using z-index . Is he?

Thanks

Answer 1

You don't need jQuery for this. In CSS, you could just set the z-index property of #navigation to be smaller than that of #footer.

Answer 2

I think this is what you're going for: http://jsfiddle.net/AqeXd/1/

var top = $('#navigation').offset().top - parseFloat($('#navigation').css('margin-right').replace(/auto/, 0));
var contentBottom = $("#content").height() + top;

$(window).scroll(function() {

    var y = $(window).scrollTop();
    if (y >= top) {
        $('#navigation').addClass('fixed');
    } else {
        $('#navigation').removeClass('fixed');
    }

    var navBottom = top + $("#navigation").height() + y;

    if (navBottom > contentBottom) {
        $("#navigation").hide();
    } else {
        $("#navigation").show();
    }
});​

Answer 3

I agree with Jeremy, jQuery is not needed. It is a simple CSS solution.

You don't need to use z-index at all. Remove the absolute positioning on the navigation column and float it left next to the content. Can be seen here

CSS

#navigation { float:left;width:140px;height:300px; background-color:#E5450F;}
#navigation p {text-align:center;}

#content {height:300px;width:400px;background-color:#ddd;margin-bottom:10px;float:left;}


#footer {height:300px;width:auto;position:relative;z-index:0;background-color:#5F93AB;margin:;padding:0;text-align:center;}

#footer_b {height:300px;width:300px;background-color:#000;position:relative;z-index:0;color:#fff;}

HTML

<div id="content">
    <p>Content</p>
    <p style="font-size:0.8em;"> * Thanks for your help *</p>
</div>
<div id="navigation">
   <p>Navigation</p>
   <p style="font-size:0.8em;"> * Hide me under footer *</p>
   <p style="font-size:0.8em;margin-top:230px;"> * Hide me *</p>
</div>
<div style="clear:both"></div>
<div id="footer">
    <p>Footer</p>
</div>

<div id="footer_b">
    <p>Footer_b</p>
</div>