jQuery HOTSHOT: Ten practical projects that exercise your skill, build your confidence, and help you master jQuery

In this project we'll create a sidebar that emulates the position:fixed CSS style but doesn't suffer from the same limitations as a pure CSS solution. We can also add an attractive animation to the page so that when navigation items in the sidebar are clicked, different parts of the page are scrolled into view.

The following is a screenshot that shows the final result of this project:

In this task we'll prepare the demo page and the other files we'll need ready for the script.

To make the benefits of this technique obvious, we'll need to use a number of extra elements that strictly speaking aren't part of the required elements for the sidebar that we'll be fixing in place.

The sidebar that we'll use as the focus of this example will need to sit within the structure of a complete page, and to see the fixed position effect, the page will also need to be quite long.

We'll be using a range of HTML5 elements when building our demo page and you should be aware that these are not supported in older versions of some browsers. If you find that you do need to support legacy browsers, you'll need to use the html5shiv script available at Google Code (http://code.google.com/p/html5shiv/).

Before we can fix the element in place, we'll need to know where that place is. In this task we'll obtain the current starting position of the <aside> element that we're going to be fixing in place.

$(function() {
  
});

var win = $(window),
    page = $("html,body"),
    wrapper = page.find("div.wrapper"),
    article = page.find("article"),
    fixedEl = page.find("aside"),
    sections = page.find("section"),
    initialPos = fixedEl.offset(),
    width = fixedEl.width(),
    percentWidth = 100 * width / wrapper.width();

Our next task is to detect when the page has been scrolled and fix the element in place when that occurs. Detecting the scroll event is made easy for us by jQuery, as is setting the position to fixed, because there are simple jQuery methods we can call to do these exact things.

win.one("scroll", function () { 
    fixedEl.css({
        width: width,
        position: "fixed",
        top: Math.round(initialPos.top),
        left: Math.round(initialPos.left)
    });
});

At the moment, our <aside> element will be fixed in place as soon as the page scrolls, which suits our needs while the browser remains the same size.

However, if the window is resized for some reason, the <aside> element will fall out of its fixed position and could be lost outside of the boundaries of the viewport. In this task, we'll fix that by adding an event handler that listens for the window's resize event.

win.on("resize", function () {
    if (fixedEl.css("position") === "fixed") {
        var wrapperPos = wrapper.offset().left,
            wrapperWidth = wrapper.width(),
            fixedWidth = (wrapperWidth / 100) * percentWidth;

        fixedEl.css({
            width: fixedWidth,
            left: wrapperPos + wrapperWidth - fixedWidth,
  ...

At this point, we should be able to click on any of the links in the navigation menu we added to the fixed element, and the page will jump to bring the corresponding section into view. The fixed element will still be fixed into place.

The jump to the section is quite jarring however, so in this task we'll scroll each section into place manually so that the jump to each section is not so sudden. We can also animate the scroll for maximum aesthetic effect.

function scrollPage(href, scrollAmount, updateHash...

At this point, we can click any of the links in the <aside> element and the page will be smoothly scrolled to the desired location on the page. The address bar of the browser will also be updated.

However, if the user tries to go back to a previous <section> using the back button of his/her browser, nothing will happen. In this task we'll fix that so that the back button works as expected, and can even use smooth scrolling when the back button is used to go back to the previous <section>.

win.on("hashchange", function () {

    var href = document.location.hash,
        target = parseInt(href.split("#part")[1]),
        targetOffset = (!href) ? 0 : sections.eq(target - 1).offset().top;

    scrollPage(href, targetOffset, false);
});

At the moment the functionality of the browser's back button has been restored, and the visitor can see the bookmarkable URL in the address bar.

If the page is requested with a hash fragment in it, the page will automatically jump to the specified <section> when the page loads. In this part we'll add some code that checks the hash property of the document.location object and if a hash is detected, it will scroll to the corresponding part of the page smoothly.

if (document.location.hash) {

    var href = document.location.hash,
        target = parseInt(href.split("#part")[1]),
        targetOffset = sections.eq(target - 1).offset().top;

    page.scrollTop(0);
    document.location.hash = "";
    scrollPage(href, targetOffset, true);

}

In this project we looked at a very simple way of mimicking CSS's position:fixed styling to fix an important element into place. The technique to only apply the fixed positioning when the page starts to scroll is simple but effective, and is an excellent way to circumvent the shortcomings of actual position:fixed when working with complex or liquid layouts.

We saw how to handle window resizes and added a smooth scrolling facility that scrolled the page between different named sections of the page.

We also looked at how we can read and write to the document.location.hash property of the window object, and how to manually scroll to the requested section when the page is loaded. We also fixed the browser's back button to work with our smooth-scrolling animations.

Very often, with the kind of in-page navigation we've used in this project, it is useful to show an on-state on the navigation links when a section is scrolled to, either manually, or by clicking on one of the links. Have a go at adding this simple but effective addition to the code that we've looked at over the course of this project.