Scroll Sidebar

Today you will learn how to have something follow you!

No, not follow you in person, that would  just be creepy. But a side bar that follows you as you scroll down the page. There are two different ways to have this on yoru webpage. Through CSS and through Java Script.

The easiest way to insert this is just using CSS fixed positioning.

The sidebar is within a #page-wrap div with relative positioning.

The sidebar will be inside there, then we just push it over into place with the margin.

“#page-wrap {

width: 600px;

margin: 15px auto;

position: relative;

}

 

#sidebar {

width: 190px;

position: fixed;

margin-left: 410px;

}

If that is coded correctly, the side bar should stay in place as you scroll down.

When using java script, you can measure how far down the user has scrolled after a window.scroll event.

If the distance is further than the top position of the sidebar, you can adjust the top margin of the sidebar.

 

$(function() {
 
    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
 
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

 

There really is no big difference between the java script and the CSS coding, but the java script does give a cool animated effect to it. That animated effect is not too big of a difference but can draw attention to that portion of the website.

 

Image

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s