javascript - Make element scroll slower (Parallax) - Stack Overflow

admin管理员组

文章数量:1287649

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"
    });
 });
}); 

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"
    });
 });
}); 

• javascript
• jquery
• css

Share Improve this question Follow edited Jan 5, 2021 at 20:51 Timothy Aaron 3,0782121 silver badges2222 bronze badges asked Feb 10, 2012 at 22:15 LiamLiam 9,8554040 gold badges114114 silver badges214214 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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"
   }); 

});

Here is a very very good tutorial for parallax scrolling. It made me understanding how it really works.

本文标签： javascriptMake element scroll slower (Parallax)Stack Overflow