jQuery sticky div页面顶部

Question

Im trying to make my div stick to the top of the window when scrolled down to it. I cant for some reason even seem to target it.

I've attached a fiddle to show you my current code. Can anybody see where i may be going wrong?

http://jsfiddle.net/rn3yc/

JS:

var $sidebar   = $(".sidebar"),
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.addClass('fixed');
    } else {
        $sidebar.removeClass('fixed');
    }
});

Answer 1

Check this good and easy CSS trick to make sticky elements : http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

EDIT

Or this one : https://github.com/imakewebthings/jquery-waypoints

Answer 2

You have no fixed class. Write one and add it to the css. Additionally, your fiddle had unclosed braces in the js.

jsfiddle.net/Nn7d2/show/ is a fixed version.

Answer 3

I have created a fiddle for you. Just changed the class with ID and applied

position:fixed

in CSS. Here is the fiddle jsfiddle.net/rn3yc/10/

Answer 4

i dont know if this is what you're looking for, but just try to see.

jsfiddle.net/4RNLC/

Answer 5

You can use the position property of css to make your header fixed.

.fixedHeader{
position : fixed;
top : 0px;
}