向下滚动后粘性标题

Question

我在这个网站上看到了这个粘性标题：http: //dunked.com/ （不再活跃， 查看存档网站）

当您向下滚动时，粘性标题从顶部下降。

我查看了代码，但它看起来真的很复杂。我只明白这一点：普通标题是用 JS 克隆的，当您向下滚动页面时，它会从顶部开始动画。

原文由 Nepo Znat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个开始。基本上，我们在加载时复制标题，然后检查（使用 .scrollTop() 或 window.scrollY ）以查看用户何时滚动超过一个点（例如 200 像素）。然后我们简单地切换一个类（在本例中为 .down ），将原件移到视图中。

最后，我们需要做的就是将 transition: top 0.2s ease-in 应用于我们的克隆，以便当它处于 .down 状态时，它会滑入视图。 Dunked 做得更好，但稍加尝试就很容易配置

CSS

 header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}

Vanilla JS （ 根据 需要填充）

 var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

或 jQuery

 $(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});

---

较新的思考

虽然上面回答了 OP 的原始问题 “Dunked 如何实现这种效果？” ，我不推荐这种方法。对于初学者来说，复制整个顶部导航的成本可能相当高，而且我们没有理由不能使用原始导航（需要一些工作）。

此外，Paul Irish 和其他人 写过 如何使用 translate() 动画比使用 top 动画更好。它不仅性能更高，而且还意味着您不需要知道元素的确切高度。上述解决方案将使用以下内容进行修改 （参见 JSFiddle） ：

 header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

使用转换的唯一缺点是，虽然 浏览器支持非常好，但您可能希望添加带有供应商前缀的版本以最大限度地提高兼容性。

原文由 Ian Clark 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个 JS 小提琴 http://jsfiddle.net/ke9kW/1/

正如其他人所说，将标题设置为固定，并以 display: none 开头

然后jQuery

 $(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

其中 200 是您希望它向下移动的高度（以像素为单位）。添加 open 类是为了让我们运行一个 elseif 而不是 else，所以一些代码不会在每个 scrollevent 上不必要地运行，节省一点点内存

原文由 joevallender 发布，翻译遵循 CC BY-SA 3.0 许可协议