Topic: Jquery { trying to use scroll for simple bottom nav idea, but having issues } (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=31583" title="Pages that link to Topic: Jquery {  trying to use scroll for simple bottom nav idea, but having issues } (Page 1 of 1)" rel="nofollow" >Topic: Jquery {  trying to use scroll for simple bottom nav idea, but having issues } <span class="small">(Page 1 of 1)</span>\

 
ridinglowest
Obsessive-Compulsive (I) Inmate

From: purgatory
Insane since: Jul 2005

IP logged posted posted 01-09-2010 04:20 Edit Quote

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?

code:
<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 (

code:
$("#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?

ridinglowest
Obsessive-Compulsive (I) Inmate

From: purgatory
Insane since: Jul 2005

IP logged posted posted 01-12-2010 21:47 Edit Quote

Can anyone help Please?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-13-2010 00:51 Edit Quote

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)

ridinglowest
Obsessive-Compulsive (I) Inmate

From: purgatory
Insane since: Jul 2005

IP logged posted posted 01-22-2010 01:44 Edit Quote

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

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 11:03 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu