1

在一个项目中，由于我编写了一个脚本（使用 jQuery，并且也调用了窗口调整大小），我有一个 div，它占据了窗口的 100% 高度和 100% 宽度。

在这个 div 中，我有另一个 div，其中包含一个标题（H3）和一个段落（P）。这个 div 在这个 100% 父 div 中垂直居中和水平居中。

现在，我想在子 div 上添加视差效果。我的意思是我希望在滚动时，div 的移动速度比他的父 div 慢。我怎么能做到这一点？我试过自己写，但它不起作用......

我的尝试：

var lastScrollTop = 0;

$(window).scroll(function(event) {
    parallax();
});

function parallax() {
  var ev = {
      scrollTop: document.body.scrollTop || document.documentElement.scrollTop
  };
  ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
  render(ev);
}

function render(ev) {
    var t = ev.scrollTop;
    var obj = $('.topBonjour .wrapper');
    var top = parseInt(obj.css('top'));

    if (t > lastScrollTop) {
      newTop = top + 1;
      $('.topBonjour .wrapper').css('top', newTop +'px');
    } else {
      newTop = top - 1;
      $('.topBonjour .wrapper').css('top', newTop +'px');
    }    
}

非常感谢，塞德里克

4

0 回答 0