0

I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.

I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.

The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.

I've used the following code with some success:

jQuery().ready(function($) {
    var $scrollingDiv = $("#sidebar");

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

But it jumps too far when scrolling down.

(original position)

SIDEBAR - ORIGINAL POSITION

(scrolled a single mousewheel click)

SIDEBAR - SCROLLED POSITION

When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.

Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.

Is there a fix that can be applied to this code, or a better way of approaching this?

---------------------------------------------------------------------------------

EDIT: position:fixed Problem

When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:

Sidebar with FIXED positioning

Here is Firebug's read-out of the CSS styles attached to this element:

Sidebar with FIXED positioning CSS

3 Answers 3

2

You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.

Consider this simple markup:

<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>

And this would be all the javascript you need:

var el = $('#sidebar'),
    pos = el.position().top;

$(window).scroll(function() {
    el.toggleClass('fixed', $(this).scrollTop() >= pos);
});

Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:

#sidebar.fixed > div{position:fixed;}

I put up a really simple demo here: http://jsfiddle.net/QZyH3/

2
  • Hi David. Thanks for that. I've amended my original post to show the problem that occurs with position:fixed.
    – turbonerd
    Dec 27, 2011 at 19:18
  • @dunc, if you look at my demo and example CSS, I applied the fixed positioning to a child element of the sidebar. That way you avoid the positioning problems you are having. Dec 27, 2011 at 19:23
2

You should try the jQuery code found in this tutorial, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.

3
  • Hi Josh. I've just had a go at this, but my left pane is using "float:left" and my right pane "float:right". Is there a way of running the code in this tutorial without using absolute positioning?
    – turbonerd
    Dec 27, 2011 at 18:33
  • Sure. In the example the left sidebar is floated left and the right one is absolutely positioned. If you inspect in Chrome and simply remove that positioning on the right sidebar and float it right, it will work just the same.
    – Josh Smith
    Dec 27, 2011 at 18:47
  • Thanks for the quick response Josh. I've amended my original post to show the problem that occurs when I do that.
    – turbonerd
    Dec 27, 2011 at 19:18
1

why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.