当用户向下滚动时,将一个元素"up"滑到另一个元素上,而没有固定的位置?



标题中的措辞很奇怪,抱歉。这种影响很难解释。

我目前有这个,它在Chrome上运行得最好:http://mattluckhurst.com/dev/

我的客户希望每个面板在用户向下滚动时向上滑动,覆盖上一个面板。我目前正在通过将"当前"面板设置为页面滚动到它时具有position:fixedtop:0来实现这一点。每个面板都具有与其在页面上的垂直位置相对应的z-index。理想情况下:

向下滚动。当下一个面板在窗口的一半时,滚动会产生动画,让你一直到达那里,然后该面板会被捕捉到顶部,这样下一个可以从上面进入。

它在Chrome中运行得很好,但我在其他地方看到了很多闪烁和其他东西。同样在手机上,它也很乱,但我们真的想要一个很好的平滑上下滑动。

我知道fixed元素在移动设备上可能会变得很时髦,所以我想知道这是不是问题所在,或者我是否应该使用除了滚动窗口之外的其他东西来获得动画/效果。

我总是看到更复杂的视差,所以这应该是非常可行的,我只是不确定从哪里开始。

谢谢你的帮助!如果你需要更多信息,请告诉我。

一些可能对您有所帮助的库:

  • https://github.com/dirkgroenen/jQuery-viewport-checker
  • https://github.com/janpaepke/ScrollMagic
  • https://github.com/matthieua/WOW
  • https://github.com/jlmakes/scrollReveal.js
  • https://github.com/Prinzhorn/skrollr

相关内容

最新更新