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

最后，我们需要做的就是将 atransition: 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（根据需要使用 polyfill）

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 如何达到这种效果？” ，我不会推荐这种方法。对于初学者来说，复制整个顶部导航的成本可能非常高，而且我们没有真正的理由不能使用原始导航（需要做一点工作）。

此外，爱尔兰的保罗等人，都写了关于如何用动画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);
}

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

这是一个 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，所以一些代码不会不必要地在每个滚动事件上运行，节省一点内存

这是一个相当多的jQuery 插件列表，它们将有助于实现类似的效果：http : //jquery-plugins.net/tag/sticky-scroll

我使用 jQuery .scroll() 函数使用 scrollTop 跟踪工具栏滚动值的事件。然后我使用条件来确定它是否大于我想要替换的值。在下面的示例中，它是“结果”。如果该值为真，则结果标签添加一个类“fixedSimilarLabel”，然后考虑新样式。

    $('.toolbar').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
        $('.results-label').addClass('fixedSimilarLabel');
    }
    else {      
        $('.results-label').removeClass('fixedSimilarLabel');
    }
});

http://codepen.io/franklynroth/pen/pjEzeK

css：

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

JS：

$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});