Scrolling Menu using Jquery


Hi Guys..

In this post I want to share a method of how you can implement scrollable Menu on HTML page using
Jquery.
The steps to implement scrollable Menu are as follows: Demo is available here

1. Include the Jquery Library:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

2. Now, lets start with the menu which we want to be scrollable:

Let’s assign id as “scrollable-menu” to the menu:(The menu will be as under)

<div id="scrollable-menu">
<ul>
<li>Home</li>
<li>Pictures</li>
<li>Contact Me</li>
</ul>
</div>

3. Next is we start write the script code using jquery to implement the scroll:
Jquery has a function to handle the event scroll.

// This is the scroll event handler
$(window).scroll(function() {
//Write the action on scroll event here.
});

4. Lets get down on the action of moving the menu as we perform the action of scrolling:

$(window).scroll(function(){
$("#scrollable-menu")
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});

Explanation:
$(window).scroll –> this is the function for scroll event for Window.
This event occurs whenever you scroll the window on browser and this
function will get executed.

$(“#scrollable-menu”) –> this is the selector which gets you the instance of DOM object
with id scrollable-menu and as we want to scroll the menu we are using its id

.animate is the function provided by jquery to perform custom animations on
object using CSS properties.

$(window).scrollTop() –> this is the function which provides us the numerical figure
of the amount of scroll performed on window
Ans using this value we are setting the margin-top value of Menu so, that it is
seen in the visible area of the page.
“slow” is the parameter of animate function to enable the animation on screen,
you can also use any numerical value in place of slow(it is in milli seconds)
More about animate function – here
More about scrollTop Function – here

5. Because this event can fire many times in a row we need to make sure we stop all previous repositions before progressing with the latest one. Imagine a users scrolls 3-4 times really fast. We want just the last call to be in control of the repositioning. Ensuring that all repositioning is stopped beforehand makes for much faster handling of the event, resulting in smoother animation. We call this BEFORE the code snippet above.

$(window).scroll(function(){
$("#scrollable-menu")
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});

6. One more way we can make the code smoother is storing the instance for the object that needs to be accessed
for every scroll event. Whenever the scroll event fires jQuery traverses the DOM looking for our element. In order to alleviate this overhead we can simply store the jQuery reference to our element in a variable when the DOM is initialised and reference this instead.

var $scrollableMenu = $("#scrollable-menu");

$(window).scroll(function(){
$scrollableMenu
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});

7. The final Code will be as follows:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$().ready(function() {
var $scrollableMenu = $("#scrollable-menu");

$(window).scroll(function(){
$scrollableMenu
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
</script>

Thats all.. Jquery makes all simple.. 🙂 😀

Advertisements