标签: headroom.js

我使用了很棒的Headroom.js插件来构建一个自动隐藏的头文件.标题从开始是静态的,并在偏移(向下滚动)后变为固定,然后变回静态(当它返回到顶部时).

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

但是我遇到了两个问题:

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

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

以下是我初始化插件的方法:

var myElement = document.querySelector("header");

var headroom  = new Headroom(myElement, {
  "offset": 150,
  "tolerance": 0,
});

headroom.init();

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

在最基本的 headroom.js 中，它只是在元素中添加和删除 CSS 类以响应滚动事件。

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

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

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