设置Parallax.js时出错

Question

我想在一个项目中使用Parallax.js，但到目前为止，我已经很难让它与一个现有的站点保持良好的关系。

这是我被挂的地方：

我想把这个插件应用到一个元素上，它的高度尺度可以与里面的内容相匹配，并且它的最小高度为300 it。

Parallax.js似乎覆盖了这一点&根据屏幕大小来修改高度，我能阻止这种情况吗？

到目前为止，我还没能“看到”任何东西。文档提到使目标div透明，但我没有运气

我试图模仿的例子：简单视差滚动parallax.js

我的书斋：现有站点，希望将视差添加到#英雄

CSS我用来实现“简单”固定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;
}

欢迎任何建议/建议/建设性的批评！已经花了一段尴尬的时间把我的头发拔出来。

Answer 1

我想把这个插件应用到一个元素上，它的高度尺度可以与里面的内容相匹配，并且它的最小高度为300 it。 Parallax.js似乎要重写它&根据屏幕大小修改高度，我能阻止这种情况吗？

您是否尝试过包装您的#hero并将视差应用于父级？这样，内部bock就会被视差脚本(同时被其父脚本移动)单独保留？

像滑块或视差之类的脚本是通过自动将所需的CSS规则应用到元素上来工作的，正如您所发现的。当这种情况发生并与您的CSS发生冲突时，请避开战斗，并将内容从脚本样式规则的影响中移开。

换句话说，给脚本一个包装器来工作，并让内容为你自己，远离贪婪的触角脚本，让你做噩梦。