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

Question

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

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

但是我遇到了两个问题:

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

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

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

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

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

headroom.init();

Answer 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的205px是从顶部当标题可以成为未固定的距离.

该tolerance的5px的是之前的状态变化滚动公差.

最后,我们将定义将添加到不同状态的元素的类.在开始时,元素将被分配一类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中完成的工作示例,请参阅此Codepen.