问题标签 [headroom.js]

我有一个导航栏，当用户向下滚动时它会隐藏，当用户向上滚动时会显示。Headroom.js库中实现了类似的行为。scroll在事件上调用隐藏和显示的逻辑。

我还有一张大桌子，我不时在其中添加一些行。即使添加了新行，我也希望此表保持用户的视图位置。这是按照本答案中的建议实施的。

问题是，当我添加一些行时，滚动位置会发生变化（通过设置scrollTop属性更改以保持滚动位置不变）并且导航栏被隐藏。我只想在用户而不是软件启动滚动时隐藏导航栏。

scroll更改scrollTop属性时可以防止触发事件吗？如何结合这两种技术 - 自适应导航栏和表格，在添加数据时保持其视口不变？

我有一个使用以下内容的页面：

• Headroom.js 用于“向下滚动时滑出视图并在向上滚动时滑回”的标题
• <a>内部部分的HTML链接
• 平滑滚动

我想确保，当页面滚动到特定锚点时（由于单击页面上的链接，例如#bottom，或手动将哈希片段添加到 URL，或遵循重定向），标题不会得到在锚的方式。

您可以在下面的代码段中重现我正在谈论的有问题的行为。单击锚点跳转到页面底部，然后单击链接跳转回顶部。

请注意，标题覆盖了浏览器滚动到的内容。

我如何以稳健的方式确保由于导航到锚元素而导致的任何滚动都被标题的高度（如果可见）偏移，以便内容出现在正确的位置？

我尝试过的一种方法是在检测到哈希更改后立即取消固定标头，例如：

但是为了平滑滚动，hashchange 事件会在滚动完成之前触发。因此标题会立即被重新固定。我也看不到任何方法来检测平滑滚动何时完成。

_{<a>在元素上添加点击侦听器并不可靠，因为对于到达 URL 中已经存在哈希片段的页面的用户来说，它会失败。JavaScript 对window.location.hash. 同样，监听 hashchange 事件也是不可靠的，因为如果用户单击锚点、滚动离开然后再次单击同一个锚点，它不会触发。}

这是我第一次处理 Gatsby 和 React，所以我可能在这个问题上使用了错误的方法。无论如何，这就是正在发生的事情。

从 gatsby-starter-hello-world 开始，我正在构建这个网站，该网站将由一个首页组成，顶部有一个英雄，包含介绍信息。就在下面，我打算插入一些内容（我还不确定是什么），这会<Header />出现在滚动条上。对于这部分，我打算使用 Headroom.js，它已经在该站点中运行。问题是我只需要在 Hero 组件的底部接触到视口的顶部后触发它。这只会发生在台式机和笔记本电脑上。在移动设备上，我打算将其设为固定导航栏。

无论如何，现在，这就是我所拥有的 Layout.js

上面的getHeroSize函数更像是我在想什么的意图展示。它真的不起作用。

我正在使用 Tailwind CSS 并使用 gatsby-source-trello 从 Trello 采购一些内容。还不知道如何制作这个 Layout.js，但这是我从一些测试中得到的，到目前为止效果很好。我知道在 gatsby-node.js 中会有一些工作要做，但我相信这个标题会出现在我创建的任何其他页面中，所以。

任何想法、建议或文档链接都会非常感激。提前致谢！

我在我的引导网站中使用 Headroom.js，到目前为止一切都很好，可以按照我想要的方式正常工作。不过我有一个问题：在“notTop”中是否有任何方法可以更改导航品牌和自定义导航链接？！让我更清楚一点，修复后，我使用带有白色版本徽标和白色导航链接的透明导航栏，但是，当向下滚动时，我需要导航栏白色透明，导航链接更暗/黑色，以及我的徽标的黑色版本。很可能可以完成，但我无法找到解决方案。提前致谢。

我正在使用 jQuery 来实现滚动效果（单击导航栏项目以滚动到页面的一部分）。

在桌面上工作正常，但我遇到了一个让我陷入困境的错误。在移动设备中，折叠的导航栏也使用滚动效果，但某些导航栏元素（后者）在单击时会将用户带到该部分，但也会导致实际折叠的导航栏滚动，本质上隐藏导航栏折叠顶部的按钮...

我也在使用 Bootstrap 5、Headroom.js 和 Neumorphism UI 库。

编辑：更多示例。这是导航栏中的一些 HTML：

这是一些 neumorphism.js 代码：

更新 - 解决了！对于可能面临这个问题的其他人，对我有用的是调整 neumorphism.js 中的溢出 - 从“隐藏”和“初始”，我将其设置为“滚动”。此外，如果您希望在单击移动设备中的链接后关闭导航栏，请添加以下内容（在 stackoverflow 上找到此内容 --> How to hide collapsible Bootstrap navbar on click）：