Javascript Can'；t诊断：打开页面时背景位置不同

我在我的网页上使用parallax.js

（页面现在已经更新，视差被移除，直到找到一个可用的解决方案）

但是打开页面并保持刷新。有时背景图像开始怪异（关闭位置）。我在chrome和firefox上都进行了测试，我不明白为什么它会这样做

你知道吗

谢谢

以下是我通过检查发现的

parallax.js存储应用它的元素的初始顶部偏移。该值存储在名为

firstTop

的变量中。

背景位置

将根据

firstTop

的值和当前滚动位置放置，这样

背景位置

只有在

firstTop

为0时才能达到0[例如，如果

firstTop

为96，则背景位置将不小于67]

注：更多关于96以后

没错，

firstTop

并不总是0，我不时地设法得到一个非零值。我怀疑这与浏览器缓存有关

那么，值

firstTop

从何而来？代码如下：

//get the starting position of each element to have parallax applied to it      
$this.each(function(){
    firstTop = $this.offset().top;
});

其中offset是JQuery中定义的函数。在查询元素的特定情况下，它将返回getBoundingClientRect。所以，如果问题出在哪里，那将是浏览器的一个bug

所以，从另一个方向看。。。我得到的值是96，只是[有时]在缓存清理之后。在断点处，除了一个灰色背景和一个滚动条外，还没有任何渲染。。。但是如果我没有在断点处清除缓存，页面的布局是可见的

大约96，是id为“header”的div的高度。当我到达断点时，高度会有所不同，这取决于我是否清理了缓存。如果我清除了缓存，它是[有时]96，如果没有，它是150（但是现在id为“wrapper”的div有

位置：relative

，它的顶部偏移量是0）

所以。。。。我们如何解释这种行为

当然，文件

style.css

。如果缓存失效，浏览器必须再次下载缓存，同时执行javascript。如果在应用css之前读取id为“wrapped”的div的位置，那么偏移量是错误的。当然，当从缓存中加载样式时，会立即应用它，不会让javascript出现错误行为

---

注：我还得到了233的firstTop和195.875的id“header”的div高度

---

解决方案是什么？我不知道。我怀疑parallax.js可以通过某种方式设置固定的初始偏移。（无法在代码保持不变时设置初始偏移）

您可以查找允许检查样式的库。（注意：使用javascript读取样式不起作用，因为它们可能已加载但未应用）

如果我是你，我会修改parallax.js（或者尝试其他版本）。无需修改parallax.js

---

编辑1：

你应该尝试：

• 使用该属性运行代码
• 尝试使用

其想法是让浏览器“稍微晚一点”执行视差初始化，以便应用css，但不会“太晚”，用户将开始与页面交互

编辑2：

• 将样式放在任何javascript之前（或将javascript放在文档末尾）
• 使用

  $（文档）。加载
  而不是
  $（文档）。准备好运行parallax.js

---

主题外：悬停效果“黄色背景上的白色字体”太可怕了……我认为它看起来不错：p但无论如何，有没有更好的颜色建议来获得更好的效果？主题外：数据是顶部请愿锚的悬停风格。当背景为黄色时，它变为白色。你不必改变它的颜色，你可以试着用背景、边框或沿着这些线的东西来产生效果。黄色是可以的，细节就是那个悬停。好吧：）一旦我完成了优先级编码，我会调查的。你可以试着为你的视差设置一个解释初始y偏移。哦，孩子：（我需要在parallax.js中修改什么？我现在已经将固定标题更改为正常。我相信它应该对我有效，但事实并非如此，parallax.js在所有示例中都有效…：|我真的希望这是我的错误，这样我就可以修复它。@EdizArca事实上我一直在修改parallax.js的演示，试图复制这种情况你遇到了…到目前为止没有运气。我想知道这是否是由于网络延迟，因为我正在本地测试。无论如何，我已经分叉了parallax.js。如果我设法复制问题并修改代码以修复它，我将发布一个补丁。我现在已经消除了视差效应，因为截止日期很紧。我将探索引入它的可能性版本一发布后，请立即阅读我的设计。谢谢，如果您有任何进一步的建议，请-我需要它们。再次感谢。我没有足够的知识来做您正在做的事情。希望，我会通读您的补丁，如果您成功的话，尝试从中理解。@EdizArca我已经能够复制pro问题是，我通过将样式放在页眉中的javascript之后来解决。为了在不改变javascript和css顺序的情况下修复它，解决方案是使用

load

，而不是

ready

。这些是提高javascript性能的一些常见建议，在这种情况下，它们也可以防止错误。因此，我不再尝试修改视差，至于视差，它需要的只是一点文档，我已经给作者发了一条关于这一点的信息。