设置时遇到问题 Parallax.js

Question

我想将 Parallax.js 用于一个项目，但到目前为止，我很难让它与现有网站完美搭配。

这是我挂断电话的地方：

我想将插件应用到一个元素，该元素的高度可以缩放以适合其中的内容，并且最小高度为 300 像素

Parallax.js 似乎覆盖了这个并根据屏幕尺寸修改了高度，我可以阻止这个吗？

到目前为止，我无法"see"任何事情。文档提到使目标 div 透明，但我没有运气

我正在尝试模拟的 Codepen 示例：Simple Parallax Scrolling parallax.js

我的代码笔：Existing site, want to add parallax to #hero

CSS我曾经实现过"simple"固定BG效果

#hero {
background-image: url("http://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: overlay;
background-position: 0 0;
background-attachment: fixed;
}

欢迎任何advice/suggestions/constructive批评！已经花了很尴尬的时间来解决这个问题。

Answer 1

I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px

Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?

您是否尝试过包裹 #hero 并将视差应用到父对象？以便内部块由视差脚本单独留下（同时被其父级移动）？

滑块或视差等脚本通过自动将所需的 CSS 规则应用到元素来工作，如您所见。当这种情况发生并且它与你的CSS冲突时，躲避战斗并将你的内容从脚本样式规则的影响中移开。

换句话说，为脚本提供一个可以处理的包装器，并为您自己保留内容，远离让您做噩梦的脚本的贪婪触角。

设置时遇到问题 Parallax.js

Trouble setting up Parallax.js

html

javascript

css

jquery

parallax.js