问题标签 [headroom.js]

我使用 position:fixed 将“帐户栏”固定在屏幕底部，当用户使用名为headroom.js的插件向下滚动页面时，我会自动隐藏它

这适用于除 Android 浏览器（运行 Kitkat 的三星 Galaxy Note 4）之外的所有浏览器，因为 Android 浏览器在屏幕底部有自己的工具栏，它覆盖了我的。

这对大多数网站来说都不是问题，因为当用户向下滚动屏幕时，android 浏览器工具栏会消失，但不幸的是，当用户向下滚动时，我会隐藏我的工具栏。当他们再次向上滚动时，我的工具栏会显示出来，但顶部的浏览器工具栏也会显示！

除了将条形图移高 40 像素以使其不会被覆盖之外，我想不出解决方案。不幸的是，这在所有其他浏览器中看起来很荒谬。另一种选择是浏览器嗅探android浏览器并且永远不要隐藏我的工具栏，但是浏览器嗅探似乎过时了。但是，在浮动浏览器工具栏的存在下进行特征检测是不可能的。

任何想法将不胜感激。

我正在尝试从 headroom.js ( http://wicky.nillia.ms/headroom.js/ ) 启动脚本以在元素到达页面顶部时触发。如果调整窗口大小，元素的位置将会改变。

我的问题：函数的偏移值不想在 $(window).resize 上使用它。变量 offset 会更新其值，但函数在定义一次后不会使用它。

这是我的代码：https ://jsfiddle.net/kh4jv748/7/

jQuery：

根据屏幕大小，我需要在 Headroom.js 中有不同的偏移量。

Enquire.js 应该可以解决问题，但我无法让它正常工作。它在每次页面加载时只加载一个偏移设置，即使它在加载时是正确的，但是当我调整屏幕大小时它不会切换到另一个设置。

我想在 React 中使用headroom.js。Headroom.js 文档说：

最基本的 headroom.js 只是简单地从元素中添加和删除 CSS 类以响应滚动事件。

直接将它与 React 控制的元素一起使用会很好吗？我知道当 DOM 结构发生突变时 React 会严重失败，但只修改属性应该没问题。真的是这样吗？你能告诉我官方文档中的一些地方说它是推荐的还是不推荐的？

_{旁注：我知道react-headroom，但我想改用原始的 headroom.js 。}

编辑：我刚试过，它似乎工作。我仍然不知道从长远来看这是否是一个好主意。

我正在我的一个网站中实施 Headroom.js。由于可用性原因，当用户单击特定 div 时，我需要能够在初始化和销毁​​脚本之间切换。这个 div 的 id 是#hamburger

到目前为止，这是我的代码。

现在，当用户点击时，Headroom 脚本被销毁。

但是，如果用户再次单击相同的 div，如何使脚本初始化？

我知道它是使用完成的：

但我不知道如何使用 jQuery 构建它。

任何帮助表示赞赏。

谢谢！

我真的很喜欢 headroom.js，但我就是无法让它工作。某种分步说明会很棒。所以这是我到目前为止所做的......

1. 我下载了git repro

2. 在我的结束正文标记之前将脚本包含到我的 html 文件中

<script type="text/javascript" src="js/headroom/Headroom.js"></script> <script type="text/javascript" src="js/headroom/jQuery.headroom.js"></script>

3. 在我的 css 文件中添加了以下 css

   .headroom { position: fixed; top: 0; left: 0; right: 0; transition: all .2s ease-in-out; } .headroom--unpinned {top: -100px;} .headroom--pinned {top: 0;}

4. 在第 2 点的脚本链接之后甚至添加了净空脚本

   <script> (function() { var header = new Headroom(document.querySelector("#header"), { tolerance: 5, offset : 205, classes: { initial: "animated", pinned: "slideDown", unpinned: "slideUp" } }); header.init(); }()); </script>

5. 向我的标题 HTML 元素添加了必要的 id 和类 <header id="header" class="header header--fixed hide-from-print" role="banner"><my navigation stuff goes in there></header>

但我不让它以某种方式工作。我没有看到滚动时应用的任何类，也没有看到其他任何东西。有谁知道错误的部分？

我会很感激的，..

提前致谢

有人在打字稿领域得到这个工作吗？谷歌搜索，它似乎没有。

想把这个库合并到我的 Browserify 项目中，但没有任何运气。

我有这个 headroom.js v0.9.3 的分型文件

• https://github.com/retyped/headroom-tsd-ambient/blob/master/headroom.d.ts
• 节点模块安装为node_modules/headroom.js/（是的，它是一个文件夹；我以前从未见过以这种方式命名的节点模块。）
• 根据 package.json，headroom.js 的主要条目是node_modules/headroom.js/dist/headroom.js

当我尝试将模块导入我的应用程序时，找不到它。

尝试了所有这些排列：

打字文件肯定是按照正确使用的方式导入的。

IDE说它可以找到目录：

我究竟做错了什么？

编辑 13-08-2015

1. app.ts 从typings目录中提取类型，如下所示：

2. index.d.ts包含这些类型 /// <reference path="bootstrap/bootstrap.d.ts" /> /// <reference path="custom.d.ts" /> /// ..etc... /// <reference path="Headroom/headroom.d.ts" />

它肯定在那里。

我想在我的网站上使用 headroom.js 以便能够在我向下滚动时隐藏标题并在我向上滚动时让它重新出现。我正在使用 WordPress。

我尝试将 js 文件放在主题文件夹中并使用 functions.php 调用它，但它似乎不起作用，所以我使用了这个插件：https ://twd.wordpress.org/plugins/headroomjs/ 。

我在附加的 CSS 中有以下内容：

当我向下滚动时，标题颜色会发生变化，但它仍然是固定的，并且不会在向下滚动时消失。我究竟做错了什么？

谢谢！

我正在使用很棒的Headroom.js插件来构建一个自动隐藏的标题。标题从一开始就是静态的，并在偏移后（向下滚动时）被固定，然后回到静态（当它回到顶部时）。

这是我所做的： http ://codepen.io/netgloo/pen/KmGpBL

但我遇到了两个问题：

• 从顶部向下滚动：当标题被固定时，我看到它向下滑动并突然向上滑动
• 从中间页面向上滚动：当标题到达偏移量时它会消失，但我需要将它固定在顶部

有人可以给我一些帮助或想法吗？谢谢

这是我初始化插件的方法：

我使用headroom.js在滚动时隐藏/显示导航栏。效果很好。向上滚动时，导航具有纯色背景，当导航位于顶部时，背景应该是透明的。Chrome 没有问题，但 Safari 有问题。

标记：

CSS：

我不明白为什么bg会变黑。任何原因？