SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Swap Navigation links once user scrolls down 500 pixels

    Trying to beef up my front-end skills, so any help is greatly appreciated!

    I have two links in a horizontal navigation bar, 'WORK' 'ABOUT ME' I would like those to change to 'TOP' once the user scrolls down 500px. The navigation bar is fixed to the top so users can jump back up to top when they are in the 'WORK' 'ABOUT ME' sections.

    What is the simplest way to go about coding this?

    Thanks for your help!

  2. #2
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check out this site, once you start scrolling a different nav drops down

    http://onemightyroar.com/

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I have been able to get the 'TOP' to display on scroll with this javascript. Now my issue is how to have it display only after the user has scrolled down 500px?

    Code JavaScript:
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function() {
    	$(window).scroll(function() {
    		if($(this).scrollTop() != 0) {
    			$('#toTop').fadeIn();	
    		} else {
    			$('#toTop').fadeOut();
    		}
    	});
     
    	$('#toTop').click(function() {
    		$('body,html').animate({scrollTop:0},100);
    	});	
    });
    </script>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •