Div中心的视差垂直并且位于绝对位置

时间:2013-09-20 11:50:53

标签: javascript jquery css html

在一个项目中,我有一个div,它占据了100%的高度和100%的窗口宽度,这要归功于我编写的脚本(使用jQuery,并调用窗口调整大小)。

在这个div中,我有另一个包含标题(H3)和段落(P)的div。此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');
    }    
}

非常感谢, 塞德里克

0 个答案:

没有答案