使元素滚动变慢(视差) [英] Make element scroll slower (Parallax)

问题描述

我的页面上有一个元素的位置绝对正确.

I have an element on my page absolutely positioned.

我正在尝试编写jQuery片段，以使该元素以比页面上其余元素慢的速率滚动.

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

---

我还试图在窗口顶部添加一个锚点，即一个固定的div，以计算出没有运气的计算结果...

---

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...

也尝试过

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

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

推荐答案

我可以为您指明正确的方向.每次滚动窗口时，都需要您的 $('.twit-bird').css()才能被调用.另外，您忘记了 .scrollTop()，并且不引用 window (或者，最好使用 this )...

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

});

这篇关于使元素滚动变慢(视差)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！