【问题标题】:On scroll cover previous section, no js在滚动封面上一节,没有js
【发布时间】:2015-05-26 19:06:57
【问题描述】:

我正在尝试执行滚动效果。 滚动时,下一页部分应覆盖当前部分。 因此,当前部分停靠在屏幕顶部,当下一部分到达时,当前部分逐渐被覆盖但不会移动。

基本上我试图重现我在这个网站上找到的效果: http://www.squarespace.com/seven/interface

它仅适用于 css(我尝试禁用 js)

我尝试对其进行逆向工程,但到目前为止我还没有成功。

如果有人有这样的建议,我将不胜感激。

【问题讨论】:

  • 可能 position:fixed;background-attachment:fixed; 使用 CSS
  • 这就是我想要做的。但这不是他们在网站上的做法。
  • 它不必与网站上的完全一样。发挥你的想象力!
  • 我知道,但如果你想使用 position: fixed,你必须跟踪部分的位置并使用 javascript 更改属性。这工作非常顺利,所以我想以此为基础并继续努力。
  • 你说你禁用了 javascript,它起作用了。我刚刚禁用了 javascript 并在刷新页面时收到了一个白屏。禁用时刷新了吗?该页面很可能使用 JS 来应用一些基本高度,因为如果没有以像素为单位定义父级,则无法以百分比定义高度。

标签: html css scroll


【解决方案1】:

主要思想是每个<section> 都有高度和position: relative 和'溢出:隐藏'。但是这些部分中的每个标签都有position: fixed

【讨论】:

  • 不错,没想到这个。非常感谢!
  • 我认为它可以工作,但经过一些测试和研究。固定元素与其父母无关。 stackoverflow.com/questions/18285473/…
  • 所以基本上你需要将所有元素放置在每个部分的页面中你想要的位置。然后你需要在每个部分设置overflow hidden。最后,您必须使用 z-index。
【解决方案2】:

我尝试在关闭 JavaScript 的情况下查看该站点,但只看到一个空白屏幕和一个滚动条(在 Chrome、Firefox 和 Safari/iOS 中相同)。此外,Chrome 告诉我滚动时会调用各种函数。除非这里有什么严重的诡计,否则 squarespace.com 似乎在使用 JavaScript。

虽然您可能能够使用 checkbox-hack 之类的东西来设置和/或为不同部分的 top 设置动画,但我认为少数用户的结果不能验证开发时间。

我整理了一个小小提琴,如果您想要链接到的网站之类的东西,它应该可以帮助您。请注意,如果您禁用或注释掉 JavaScript,这仍然可以使用。

https://jsfiddle.net/kx94my17/1/

【讨论】:

  • 禁用javascript时需要去掉body上的属性 opacity: 0。
  • @nimzur 我不确定你的意思。对我来说它看起来不错,并且可以在没有 js 的 Safari 上运行。
  • 您说禁用 javascript 时有一个空白区域。我说的是他们的网站。你的例子有效。谢谢。
猜你喜欢
  • 1970-01-01
  • 2020-04-27
  • 2010-11-22
  • 1970-01-01
  • 1970-01-01
  • 2014-01-13
  • 1970-01-01
  • 2014-06-10
  • 1970-01-01
相关资源
最近更新 更多