一句话说明问题，其实就用 fullPage.js 做

接下来我给你讲解一下， 1+ 的实现

从代码来看，明显锤子更加专业，但是锤子网页的代码压缩了看不了，所以讲讲 1+
在网页源码中可以找到如下代码，从下面代码中可以看出，顶部导航被脚本自动修改（固定）

 javascript


 $(function(){
  $('.nav-panel, .nav-panel .fp-tableCell,.header').height($('.op-top-box').height()-2);
  $(window).resize(function(){
    $('.nav-panel, .nav-panel .fp-tableCell,.header').height($('.op-top-box').height()-2);
  });
})

但是没完，接下来我们来看看 js 文件中的代码，链接： http://statics.oneplus.cn/re/js/s1.js

我们用编辑器或 IDE（集成开发环境，本人用 WebStrom）格式化代码，就可以发现如下代码：

 javascript


 afterRender: function () {
  $(".nav-panel, .nav-panel .fp-tableCell").height($(".header").height()), $("#fp-nav ul li:lt(1)").hide(), $(".artisan-icon").css({bottom: $(".header").outerHeight(!0)}), $("#fp-nav").addClass("show-fp-nav"), gestureCenter()
},
afterResize: function () {
  $(".nav-panel, .nav-panel .fp-tableCell").height($(".header").height()), $.fn.fullpage.moveTo(g), gestureCenter()
}

用过 fullPage.js 的人都知道，当 fullPage.js 渲染 Section 之后，会重新渲染（改变）.fp-tableCell 的高度，改变浏览器大小也会重新渲染。

所以 1+ 的前端作者，就又去定死顶部导航的高度。虽然代码有点恶心，但是能高效产出，何乐而不为呢？你觉得呢？

因此本人还特地写了个 Demo，根据以上我讲的思路，就可以实现你要的效果

总结：很多时候我们要灵活的去应用

其它

1+ 的这个效果产出是一个高级工程师做的。
锤子那个效果不知道怎么做的，用了很多新技术（angular等），估计是个架构师级别的，仰望ing
反正如果纯手工从零开始做的话，还是可以实现的，实现思路可以不一样。不过难度还是有点大的，没有必要了。