Creating a Scrolling Navigation Bar Effect with CSS and JavaScript

As I explained, my intention is to teach you how to construct a navigation bar that can be hidden and displayed on a web page by way of a scrolling effect. Since I showed you the navigation bar's markup in the previous section, I'm going to incorporate that effect into the bar in this one. 

Please examine the following JavaScript code. It implements the scrolling effect through use of the Scriptaculous “Effect.toggle()” method:

// display/hide navigation bar

function toggleNavBar(){

new Effect.toggle('navbar','slide');

}

// initialize navbar switcher

function initializeElement(){

Event.observe($('switcher'),'click',toggleNavBar,false);

}

Event.observe(window,'load',initializeElement,false);

Actually, the above JavaScript snippet is all that you need to turn the static navigation bar into a dynamic web interface that can be enabled and disabled via a scrolling effect.

In this case, I simply used the Scriptaculous’ toggle effect to perform the scroll, which will be fired up each time the switcher is clicked by a user. See how easy it is to construct a dynamic bar by using the Scriptaculous framework? I guess you do!

Nonetheless, if you’re like me, then you’ll want to see how the JavaScript code can be linked with the structural markup corresponding to this navigational bar. Therefore, in the next section I’ll be including the complete source code of this web application in a single file.

Click on the link below and keep reading.