如何创建滚动到粘性导航栏的标题？

Question

我想创建一个包含图形/图像的标题，当用户向下滚动以查看页面内容时，标题从底部开始，然后固定在屏幕顶部。

以下是一个示例：http://www.thinkful.com/learn/javascript-best-practices-1/

我该如何创建？

Answer 1

我使用了jQuery Waypoints（http://imakewebthings.com/jquery-waypoints/）并取得了很大的成功。

Answer 2

选中scrollTop()。你可以很容易地搜索到这个。 How to build simple sticky navigation with jQuery?

Answer 3

使用jQuery：

1. 使用$(window).on('scroll',function(){ /*your code*/ });即可 将函数绑定到scroll事件。

2. 在该函数内部使用document.scrollTop来了解当前情况 滚动条的垂直位置

3. 使用.css()或.addClass()

更改标题和侧边菜单的CSS

4. 最后使用HTML5 History API您可以更改网址 不使用history.replaceState()方法加载页面。

我刚刚分叉了一个名为Scrollit.js的插件来完成这项工作。 original version from Chris Polis效果很好，但不会更改网址。 My version确实更改了网址尚未经过全面测试。