Javascript 如何使引导标头在向下滚动时更改大小？

我已经看到了一些关于这个的不同的线索，但是没有一个答案对我来说是有效的解决方案

以下是我想要的：

• 顶部带有大徽标的透明大标题
• 当用户滚动过最上面的区域时，带有小徽标的彩色小标题

我正在使用

navbar fixed top

和Bootstrap的scrollspy来添加和删除标题中的某些类

以下是它迄今为止不起作用的原因：

• $（window）.scrollTop（）

  不会返回任何有意义的内容
• 从顶部开始改变一定数量的像素似乎是错误的，因为不同的屏幕分辨率会有所不同
• 根据

  activate.bs.scrollspy

  捕获的内容启动更改效果相当好，只是第一次加载页面时显示了错误的标题
• 当scrollspy找到一个
  时，似乎不可能在某个位置放置一个
  ，并更改标题。我已经尝试过在维度中创建div 1px并将其放置在页面的绝对顶部，但scrollspy仍然可以从远处识别它

下面是我目前的jQuery代码，它非常不精确，在第一次加载页面时显示了错误的标题（请记住，加载（重新加载）页面时，您并不总是在页面顶部！）

---

如下面所述，将代码包装到window scroll事件中，然后只有$（window）.scrollTop（）将按预期工作

$(window).scroll(function () {});

---

这是一个很好的问题示例，缩小导航栏有点棘手，但并非不可能。你必须考虑很多事情。我不久前发现了这个：

很奇怪，

$（window）.scrollTop（）

没有返回任何东西。你在哪个浏览器上？以及重新加载浏览器时出现的问题：

$（窗口）。加载（函数{
//检查滚动距离的逻辑
})

加载/重新加载页面时如何？

$(window).scroll(function () {});