修复页面滚动时的标题转换

我一生都无法弄清楚这一点。有谁知道这个网站上的滚动效果是如何创建的？ -http://blindbarber.com/news http://blindbarber.com/news

我正在开发一个项目，该效果将非常有帮助，这样我的固定导航在滚动时不会太大。

提前致谢。

标题与 css 保持在顶部position:fixed..你可以设置 header css --position:fixed从头开始或将其更改为position:fixed一旦他开始滚动页面..并将标题更新为您想要在他滚动时保留的内容..

// css
.container {
  height: 2000px;
  width: 100%;
  background-color: yellow;
}

.header {
  text-align: center;
  background-color: red;
  height: 100px;
  min-height: 50px;
  width: 100%;
}

// js

window.onscroll= function () {
  var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
  var header = document.getElementById("header");
  if (top > 50){
    header.style.position = "fixed";
    header.style.height = "50px";
  } else {
    header.style.position = "relative";
    header.style.height = "100px";
  }
}

//html
<div class="container">
  <div id="header" class="header">
    Hello World
  </div>
</div>

Demo here http://jsfiddle.net/68eXM/3/