Topic: Jquery { trying to use scroll for simple bottom nav idea, but having issues }

I had an idea for my website to have a bottom navigation that is always at the bottom until a certain point (990 from top for testing) and then it scrolls back up, as the user is scrolling the page. I have that part working when scrolling down the page!! But if the user scrolls back up and the nav hits 990 again it needs to go back into its fixed poistion at the bottom of the page, that is not working.

Heres my code, any ideas of what I am doing wrong?

<script language="javascript" type="text/javascript" src="includes/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
       
        $(window).scroll(function () {
            var theHeight = $("#wrapper").height();
           
            var p = $("#bottomNavWrap");
            var position = p.position();
            var top = position.top;
                $("#test").text( "left: " + position.left + ", top: " + position.top + ", Height: " +  theHeight);
               
                if (top > 990){$("#bottomNavWrap").css({'position' : 'relative', 'bottom' : '0'});}
                else if (top < 990){$("#bottomNavWrap").css({'position' : 'fixed', 'bottom' : '10px'});}
   
        });
       
       
      });

</script>

If you see the line (

$("#test").text( "left: " + position.left + ", top: " + position.top + ", Height: " +  theHeight);

) This works all of the time if I comment out the if statement below it. No matter what I will get a reading. But if I uncomment the if statement and scroll down the page after the first condition sets I don't get a reading anymore. Its almost like after I set the css of the bottomNavWrap div the scroll function is stopped and not watching anymore.

Any suggestions?

Can anyone help Please?

It would help to see a live example to see your CSS and markup.

Also I can't help wondering why one would want to move the navigation like this and why load 60KB of JS ( okay, 19-20 once GZip'ed ) for that while a few bytes of CSS ( position:fixed; bottom:0; ) can do.

OTOH I'm wondering if you couldn't achieve a similar effect to what you want by having the navigation in position:relative; after an empty [pseudo] element or transparent img ( which can be CSS generated content ) with a position:absolute;top:0;bottom:0;height:100%;max-height:990px;



(Edited by poi on 01-13-2010 00:57)

what I am trying to do is that when the user scrolls down the page is the nav gets to a certain point we no longer use the bottom 0 style. check out the link
http://jeremyselph.no-ip.biz/projects/jsNew/index.php