Headroom.js 具有初始静态状态的标头

【问题标题】：Headroom.js header with initial static stateHeadroom.js 具有初始静态状态的标头
【发布时间】：2017-05-18 18:48:31
【问题描述】：

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

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

但我遇到了 2 个问题：

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

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

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

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

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

headroom.init();

【问题讨论】：

    标签： javascript css headroom.js


    【解决方案1】：

    headroom.js 脚本主要为您处理一些类的添加/删除。由您来添加适当的样式以达到您想要的效果。让我们从最简单的部分开始，HTML：

    HTML

    <header>
  Header
</header>

    就是这样！

    现在进行 JS 设置：

    JS

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

var headroom  = new Headroom(myElement, {
  "offset": 220,
  "tolerance": {
    up: 0,
    down: 0
  },
  "classes": {
    "initial": "header--fixed",
    "pinned": "slideDown",
    "unpinned": "slideUp",
    "top": "top",
    "notTop" : "not-top",
  }
});

headroom.init();

    第一行选择header 元素。第二个使用配置值创建一个新的Headroom 对象。我已经根据您想要达到的效果设置了这些值 - 当页面快速向下滚动时，标题应该滑开，并且在页面向上滚动时应该滑入视图。

    offset 的 205 像素是标题可以取消固定时到顶部的距离。

    5px的tolerance是状态改变前的滚动容差。

    最后，我们将定义将添加到元素中用于不同状态的类。在开始时，该元素将被分配一个header--fixed 类。固定后，元素将收到额外的slideDown 类。当取消固定时，元素将收到额外的slideUp 类。

    最后一行初始化headroom 对象。

    使用基于状态的类，我们现在可以创建实现所需效果所需的 CSS。

    CSS

    我们将从 .header--fixed 类开始：

    .header--fixed {
  position: absolute;
  top: 0; 
  width: 100%; 
}

main {
  padding-top: 110px;
}

    这会设置页眉的初始位置（在顶部），并为页面的主要内容设置一个填充，这样它就不会被页眉覆盖。

    接下来我们需要定义各种状态的样式 - .top、.not-top、.slideDown 和 .slideUp：

    .header--fixed.top {
  transition: none;
  transform: translateY(0);
}
.header--fixed.not-top {
  position: fixed;
  transform: translateY(-100%);
}
.header--fixed.slideDown.not-top {
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}
.header--fixed.slideDown.top {
  transition: transform 0.3s ease-in-out;
  position: fixed;
}
.header--fixed.slideUp.not-top {
  transition: transform 0.3s ease-in-out;
  transform: translateY(-100%);
}
.header--fixed.slideUp.top {
  transform: translateY(-100%);
  position: absolute;
}

    这些样式中的大多数都与设置每个状态的位置和过渡有关。简而言之，当页面滚动到标题下方时，将应用 .not-top 类。 .top 在页面滚动到顶部附近（在页眉高度内）时应用。

    除了这个关键的 CSS 之外，您还需要 CSS 来设置标题样式 - 背景颜色、字体等。这可以通过定位 header 元素或 header--fixed 类来应用。

    最后一点，也是问题的症结在于当页面滚动回最顶部时重置页眉——即window.pageYOffset 的0。当页面到达这一点时，我们需要删除.slideDown 类，以便标题随页面滚动。 

    window.addEventListener('scroll', function() {
  if (window.pageYOffset === 0) {
    myElement.classList.remove('slideDown')
  }
})

    完整代码

    综上所述，我们得到了这个：

    // Headroom.js
// https://github.com/WickyNilliams/headroom.js
var myElement = document.querySelector("header");

var headroom  = new Headroom(myElement, {
  "offset": 220,
  "tolerance": {
    up: 0,
    down: 0
  },
  "classes": {
    "initial": "header--fixed",
    "pinned": "slideDown",
    "unpinned": "slideUp",
    "top": "top",
    "notTop" : "not-top",
  }
});

headroom.init();

// When the page is at the top, remove the slideDown class.
window.addEventListener('scroll', function() {
  if (window.pageYOffset === 0) {
    myElement.classList.remove('slideDown')
  }
})
    .header--fixed {
  position: absolute;
  top: 0;
  width: 100%;
}
.header--fixed.top {
  transition: none;
  transform: translateY(0);
}
.header--fixed.not-top {
  position: fixed;
  transform: translateY(-100%);
}
.header--fixed.slideDown.not-top {
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}
.header--fixed.slideDown.top {
  transition: transform 0.3s ease-in-out;
  position: fixed;
}
.header--fixed.slideUp.not-top {
  transition: transform 0.3s ease-in-out;
  transform: translateY(-100%);
}
.header--fixed.slideUp.top {
  transform: translateY(-100%);
  position: absolute;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  text-align: center;
}

header {
  background: #4ECDC4;
  padding: 40px;
  font: normal 30px/1 sans-serif;
}

main {
  padding: 110px 0 0 0;
}
    <script src="https://unpkg.com/headroom.js"></script>
<header>
  Header
</header>

<main>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
  <p>Lorem ipsum 1</p>
  <p>Lorem ipsum 2</p>
  <p>Lorem ipsum 3</p>
  <p>Lorem ipsum 4</p>
  <p>Lorem ipsum 5</p>
  <p>Lorem ipsum 6</p>
  <p>Lorem ipsum 7</p>
  <p>Lorem ipsum 8</p>
  <p>Lorem ipsum 9</p>
  <p>Lorem ipsum 10</p>
  <hr>
</main>

    这样我们就拥有了我们需要的一切。有关在 SCSS 中完成的 CSS 的工作示例，如您的示例，请参阅 this Codepen。

    【讨论】：

    • 嗨，布雷特，非常清晰和好，除了一件事：我想要的效果是标题 static 处于初始状态。相反，在您的示例中，标题始终是 fixed 从一开始。你能帮我解决这个问题吗？
    • 您可以在第一篇文章中提到的网站中看到这种行为：www.chandeliercreative.com
    • 啊，我明白了。答案已更新，Codepen 也已更新。
    • @FredK 我对页眉何时/如何随页面滚动进行了一些小的改进。
    • 嗨，布雷特！感谢您的新答案，我将对其进行测试并告诉您
    猜你喜欢
    • 1970-01-01
    • 2011-04-19
    • 2011-08-26
    • 2019-05-08
    • 2013-09-22
    • 1970-01-01
    • 2017-12-23
    • 1970-01-01
    • 2015-06-24
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode