Question

我有2个div，我们称之为#div_1和#div_2。两个div都有内容。我想做但却想不到的是：当用户滚动页面时，我希望看到div_1消失在屏幕的顶部，就像它被推离屏幕一样。同时div_2应该在div_1下面显示。然后当div_2完全可见时，如果你愿意，div_2应该能够滚动，延迟滚动。

如下：http://eephusleague.com/magazine/

我已经尝试编写和编辑了很多代码段，但我似乎无法找到方法。我是jQuery的新手，所以如果可能的话我会非常感激。

提前致谢

Answer 1

有很多jquery插件可用于制作这些影响＆amp;这些天很受欢迎。以下称为视差滚动的网站是一些插件。

http://markdalgleish.com/projects/stellar.js/demos/

http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

http://johnpolacek.github.com/scrollorama/

http://joelb.me/scrollpath/

http://curtain.victorcoulon.fr/#intro

网站示例：

http://www.1stwebdesigner.com/inspiration/parallax-website-design/

Answer 2

你看到和说的是视差滚动。

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

有一些jQuery插件，但如果你无论它如何工作，我可以给你一个小例子：

在文档滚动上，它是一个jquery事件：

   $(window).scroll(function() {


   });

如果用户使用本机浏览器滚动条滚动窗口，

此函数内的所有内容都会作出反应。

你可以在这个函数中加入一些检查，如：

if ($(this).scrollTop() > 10) {
    // if current window top position greater than 10 you cant let move some elements
    $('#div_2').css{top:$(this).scrollTop()};
}

所有在一起：

   $(window).scroll(function() {

      if ($(this).scrollTop() > 10) {
         $('#div_2').css{top:$(this).scrollTop()};
      }

   });

这是非常基本的

获取当前滚动方向的其他内容：

var oldPos = 0;
function getScrollDirection(actPos) {

   if (actPos > oldPos) {
       console.log("down");
   } else {
       console.log("up");
   }
   oldPos = actPos;

},

将此函数放在滚动事件中，如：

$(window).scroll(function() {

      getScrollDirection($(this).scrollTop());

});

现在您有一些工具和信息可以为您的网站构建自己的视差滚动： - ）

我认为这个插件是最好的：

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

所以我希望这会有所帮助。

Div动作基于滚动，关闭屏幕

2 个答案: