Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / Use jQuery to create a floating navigation based on scrolling

Dec 22, 2010 By Jared Heinrichs 2 Comments

Use jQuery to create a floating navigation based on scrolling

I didn’t know what else to call this post other than “Use jQuery to create a floating navigation based on scrolling”! If this doesn’t make sense let me describe want we will be creating. Hopefully after that things will become clearer.

Have you ever seen a site where when you scroll an object on the page just seems to magically follow you? Most of the time this sort of thing is done with Ads so the ad is in your face. How do these guys do that?

Use jQuery to create a floating navigation based on scrolling 01

We will be looking at this but instead of using ads we are going to have our navigation area so that it’s always visible. As an extra bonus we’ll make our animated when it moves and we’ll make sure that it’s animation is as smooth as glass.

Before getting into thing you will need to know about the scroll function in jquery. Basically when ever you scroll and event will be made letting the script know that you’ve scrolled. While this is good when we scroll we’ll probably set off 100 or so scrolls in a very short span. Because of the amount of events created it can slow things down and make things choppy because it has to redraw after each event.

So how do we first of all code this and secondly how do we prevent the choppiness? I thought you’d never ask! Let’s look at the code:

HTML

Use jQuery to create a floating navigation based on scrolling 02

CSS

Use jQuery to create a floating navigation based on scrolling 03

jQuery

Use jQuery to create a floating navigation based on scrolling 04

Ok the HTML should be really self explanatory. I will go over the CSS and jQuery.

CSS

Because I want to use positioning I give #navigation an absolute position of top – right on the page( Naigation will have a 5px padding). I also want it to hover over anything else (if the page is made smaller) so I gave it the highest z-index on the page. All links will be aligned to the right and I applied a background color to match the example above.

jQuery

First off I make sure that the page is ready. Next I want to grab jQuery’s “Window” element. I tell jQuery that when ever the Window scrolls to send an event. Now that we know that the scroll even happens we should do some magic on #navigation

Let’s select #navigation. Stop any animation that might be going on with it. Then let’s animate it. You might be asking why I ran stop. As you are scrolling you might send 20-40 events in a second to the browser. This means that jQuery has to do a ton of math. This will make things look jerky. To avoid this I just say… Stop let the browser do what it wants when the person stops start the animation.

If you’ve read some of my previous jQuery tutorials you might remember going over how animate works. The first section basically says: Assign the element top (This refers to the CSS position element “Top”) a value of what ever the documents Top position is.

The second part basically tell the animation how long to animate things for and what animation you want to use.

Try it out! It’s amazing how smooth jQuery can actually run when the code is clean!

Filed Under: jQuery

Comments

  1. Julian says

    Mar 1, 2011 at 3:00 pm

    A demo and code that can be downloaded or copied and pasted would be nice.

  2. Jared Heinrichs says

    Mar 3, 2011 at 5:34 pm

    I hope to do demos in the future. That being said I don’t post “text” code here because I am hoping people will actually try to understand things instead of copy and paste this into their website.
    If you follow along it should be pretty easy. It’s only 12 lines of jQuery 😉

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design