内联 JavaScript 似乎随机加载，如果有的话

Question

首先，我想说，如果这是一个简单的问题，我很抱歉。我对 HTML/CSS 场景相当陌生，甚至还没有到达 Javascript 场景。

这是我的问题。我有一个要为我叔叔建立的网站，您可以看到 here。（它仍然处于 pre-alpha 阶段，所以链接不起作用）。它作为本地文件工作正常，但一旦我托管它，我的 'sticky' header 就开始太快了，如果有的话。重新加载页面大约每 10 次工作 1 次。

我可能已经或可能没有找出问题的原因：我的占位符。我的粘性代码本身在大多数情况下都可以正常工作，除了一件事：当粘性条停靠时，它会固定并且文本会向上跳 90 多个像素。为了解决这个问题，我在下面的代码中添加了 6 和 7 行：

var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
  sticky.classList.remove('fixed');               
window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
  jQuery('.content').css("paddingTop", "0px");
}
document.addEventListener('scroll', onScroll);

它基本上是在其中插入一个占位符来停止该跳转。它工作正常，除了现在它破坏了我的代码。我做了一些实验，发现占位符似乎是随机加载的，而且 header 变得很奇怪。这是我能做的最好的了。

似乎是占位符代码破坏了它，因为 without the code 它似乎工作正常，也许是在重新加载几次之后。但是，我完全被难住了。有人知道如何解决吗？

（在 Chrome 64 位和 32 位以及 Chrome 中针对 Android 进行了测试，尽管这在另一个层面上存在问题。作为本地页面工作正常，但不是托管时。)

Answer 1

看来这些代码执行得太早了，图片还没有加载，你可以使用chrome开发工具在var origOffsetY = sticky.offsetTop;中添加暂停中断。

那么你可以看到2个案例：22或者642

你可以进一步检查当满足22条件时，应该是横幅的图像没有完成，如果你使用document.querySelector('.splash img')获取它并检查它的高度，你会看到 0。在 642 的情况下，你会得到 500.

不同之处可能是图像有时来自缓存，有时从互联网加载，因此它可能会或可能不会决定脚本执行时的高度。

所以我们必须确保 .splash 中的 image 已经加载：

<script>

// Wrap the logic to a function for call.
var stickFunction = function() {
    var sticky = document.querySelector('.sticky');
    var origOffsetY = sticky.offsetTop;

    function onScroll(e) {
      window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                      sticky.classList.remove('fixed');

      window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
                                      jQuery('.content').css("paddingTop", "0px");
    }

    document.addEventListener('scroll', onScroll);
}

// Get the image element
var splashImage = document.querySelector('.splash img');

// Check if image is complete or not.
if (splashImage.complete) { // If completed, do the logic.
    stickFunction();
} else { // If not, tell the image to call the function for you when it is loaded.
    splashImage.onload = stickFunction;
}


</script>

内联 JavaScript 似乎随机加载，如果有的话

Inline JavaScript seems to load randomly, if at all

javascript

jquery

html

css

sticky