Question

我不能为了这个人的生活这一点。有谁知道这个滚动效果是如何在这个网站上创建的？ - http://blindbarber.com/news

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

提前致谢。

Answer 1

标题位于css position:fixed的顶部..您可以从头开始设置标题css - position:fixed，也可以在开始滚动时将其更改为position:fixed page ..并在滚动时将标题更新为您要保留的内容..

// 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>

演示here

Answer 2

这就是我想要的：

http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

因此，为您提供答案的Google搜索字词是“响应式菜单”+ javascript。

在我的情况下，我正在寻找一个jquery插件，所以我添加了“jquery”。我没有找到太多使用“固定标头转换”

：）

滚动页面时修复标题转换

2 个答案: