Make element scroll slower (Parallax)

I have an element on my page absolutely positioned.

Im trying to write a snippet of jQuery to make that element scroll at a slower rate than the rest of the elements on the page.

I’ve written this so far but cannot seem to get it too work at all. Has anybody experience with this and if so would you care explaining?

$(document).ready(function() {
    $window = $(window);
    $('.twit-bird').css({
        'top' : -($('window')/3)+"px"
     });
}); 

---

I’ve also tried to add an anchor, a fixed div at the top of my window to work out the calcs from that with no luck…

---

also tried this

$(document).ready(function() {
// Cache the Window object
 windowScroll = $(this).scrollTop();

 $(window).scroll(function() {
    $('.twit-bird').css({
        'top' : -(windowScroll/3)+"px"
    });
 });
}); 

Answer

I can point you in the right direction. You need your $('.twit-bird').css() to get called every time the window is scrolled. Also you forgot .scrollTop(), and don’t quote window (or, even better just use this) …

$(window).scroll(function () { 

   $('.twit-bird').css({
      'top' : -($(this).scrollTop()/3)+"px"
   }); 

});