滚动后固定内容

一位读者给我发送了一个 GIF，展示了他们在 Google 移动端看到的酷炫效果。（可能是您在 Android 上启动 Chrome 时看到的首页？）页面中间有一个搜索输入框，它会随着页面滚动，但当它即将滚动出页面时，它会固定到页眉。让我们来了解一下，因为，你知道……

哦：我是一名前端开发人员，所以我基本上整天都在收到关于在滚动后将内容固定到顶部的请求

— Daniel Wilson (@dancwilson) 2014年9月16日

这是一个很酷的效果，尤其是在用于改善用户体验而不是固定一些愚蠢的侵入性广告时。这是我基于其想法制作的 GIF。有点卡顿，但想法在那里

两种状态

像大多数好的技巧一样，它并没有什么特别之处。我们所做的只是考虑（并设计）两种不同的可能状态

1. 搜索栏在其可滚动位置
2. 搜索栏在其固定的页眉位置

我们只需更改类名即可在它们之间切换。在不同的场景中显示两个搜索表单的技巧并没有什么用。这很好，因为我们不想围绕着保持它们同步而费力。只需移动一个就容易得多。

状态一

（我将在这里使用 SCSS，因为嵌套对于管理状态很有用。）

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
}

.search { /* Container just in case we want more than just the search input to come along */
  position: absolute;
  top: 155px;
  left: 20px;
  right: 20px;
  input {
    width: 265px;
    transition: width 0.2s;
    -webkit-appearance: none; /* Autoprefixer doesn't catch this */
  }
}

.top {
  height: 250px; /* Space in here for search */
  padding-top: 40px;
  position: relative;
}

状态二

假设我们在父元素上添加了一个名为“fix-search”的类。

.top-header {
  ...
  .fix-search & {
    background: #eee;
  }
}

.search { /* Container just in case we want more than just the search input to come along */
  ...
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

切换状态

这里的技巧是在恰当的时机应用该类。在我们的演示中，我们可以简单地测试完美的时机是什么，并将该时机硬编码到一些监视滚动的 JavaScript 中。jQuery 风格

var wrap = $("#wrap");

wrap.on("scroll", function(e) {
    
  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }
  
});

这就是在我们设置的两个状态之间切换所需的一切。如果页面向下滚动 147 像素或更多，则会应用该类。如果不是，则不会。即使您向下滚动然后向上滚动，该类也会消失（因为此小函数在每次滚动事件中都会被调用）。

演示

查看 CodePen 上 Chris Coyier 的 内容中的搜索框移动到固定页眉。(@chriscoyier) 在 CodePen 上。

去抖动

在每次演示将事件绑定到滚动事件时都提及滚动去抖动的伟大传统中：您应该考虑在将函数绑定到滚动事件时进行 去抖动，因为如果您不这样做，它将被调用无数次，并且速度可能会很慢。

CSS

这是那种仅用 CSS 就能轻松完成的事情。目前还没有想到什么好的解决方案，但我一直对人们使用 CSS 完成的疯狂事情感到惊讶，所以如果有什么新东西出现，我会更新它。

也许有一天，我们将能够进行滚动位置媒体查询？

固定定位支持

请注意，此演示依赖于固定定位，它在移动设备上的历史记录不稳定。虽然我很想说它现在“支持得很好”，但您应该自己做出判断。一些阅读材料

• Can I Use… 关于固定定位
• 移动浏览器中的固定定位 由 Brad Frost 撰写
• iOS 上固定位置和滚动的相关问题 由 Remy Sharp 撰写

这只是一个（不是特别可重用）示例

此演示中有很多 魔法数字。任何时候您设置高度时，大脑中都应该发出一些警告信号。这并不意味着永远不要这样做，只是意味着要小心。在此演示中，如果页眉中的居中图像高度发生变化，则无论如何看起来都会很奇怪。这不是最灵活和最宽容的布局。即使您修复了页眉以使其在更改后看起来正确，JavaScript 也具有相应的魔法数字来指示何时更改状态。

也许使用 waypoints（或其概念）的一些版本可以创建更可靠的系统。