How to Move the Left Navigation Bar When Scrolling in HTML

The computer mouse can move more than a browser's scrollbar.

If your Web page has an important navigation bar containing critical links and information, keep the navigation bar visible by making it scroll when users move their scrollbars. JavaScript makes this intriguing scroll effect possible. Each browser has a special HTML property that contains the exact position of its vertical scrollbar. Synchronize a left navigation bar's motion with the movement of a site visitor's scrollbar using JavaScript.

Instructions

1. Open your Web page document move to the document's body section: Find the code block you wrote that creates your navigation bar.

2. Add the following div tag before that code block:

   <div id = "navBar1">

3. Paste "</div>" - without the quotes -- after the code block. When done, the code that creates your navigation bar will exist inside a div block similar to the example shown below:

   <div id = "navBar1">
   NAV BAR CODE HERE
   </div>

   The "NAV BAR CODE HERE" text represents the code block that generates your navigation bar.

4. Add the following JavaScript code to the document's head section:

   var navBarID = "navBar1";
   var bodyObject;
   var navBarObject;

   window.onload = function () {
   var bodyObject = document.getElementsByTagName('body')[0];
   var navBarObject = document.getElementById(navBarID);
   navBarObject.style.position = "absolute";

   window.onscroll = function () {
   scrollObject(bodyObject, navBarObject);
   }
   }

   The navBarID variable holds the id of the div you added to the document's body section. The window.onload event calls a function that sets up a window.onscroll event. The window.onscroll declaration causes the JavaScript function named "scrollObject" to run whenever you move your browser's scrollbar.

5. Paste this JavaScript function below the code listed in the previous step:

   function scrollObject(bodyObject, navBarObject) {
   var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
   navBarObject.style.top = (scrollPosition + 100) + "px";
   }

   This code creates the scrollObject function. It gets the scrollbar's current vertical position and stores that position in the scrollPosition variable. The final statement sets the top position of the div that contains your navigation bar to the value stored in scrollPosition. This causes your navigation bar to move whenever the value of scrollPosition changes.

6. Save the HTML document and open it in your browser. Scroll down your Web page. The navigation bar moves as you scroll.

Tips & Warnings

• The id value of the div that surrounds your navigation bar is “navBar1.” You can use any name you like for this div. If you change the name, change the value assigned to the navBarID variable used in the JavaScript code.

• Make other objects such as images and even videos move when you scroll by surrounding those objects with the opening and closing div tags as described in these steps.

References

• Mozilla Developer Network: Element.scrollTop
• Microsoft MSDN: DocumentElement Property (document, HTMLDocument Constructor)

Resources

• HTML Dog: JavaScript