如何用CSS3和jQuery创建一个动态的粘性头部

HTML代码

在HTML中，这个例子是非常简单的，我们只需要的是一个H1和header标签。下面再加一张图片来测试页面滚动的效果。

<header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" />

jQuery代码

CSS过渡是处理我们粘头的动画部分的最佳方式。所以我们使用jQuery来检测窗口的滚动位置。 当窗口的滚动位置大于1，这意味着用户向下滚动，那么我们要添加’stycky’类中的header 否则，我们就删除它（如果它存在）。

这些都意味着我们能把头部的样式应用在基于’stycky’的类中。

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

需要注意的一点是，以这种方式使用jQuery的优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复）如果禁用JavaScript，导航仍然可以工作，但是顶部只会使用非粘性的默认状态样式。

CSS代码

我们用CSS来样式化两种不同的状态，默认状态，和粘性状态并在两种状态之间转换。

首先，添加一些简单的样式，改善头部的外观：

header { position : fixed width : 100 % text-align : center font-size : 72 px line-height : 108 px height : 108 px background : #335C7D color : #fff font-family : 'PT SANS“ }

现在到了有趣的部分：当用户向下滚动，’sticky‘类将会被应用，我们现在可以用顶部风格的不同来反映新页面上的优先级。我们还可以设置位置固定，以便当页面滚动时不会改变定位。

还有几件事情我们可能要做：第一，我们要改变字体大小，以便它使用更少的屏幕空间；第二改变背景颜色和对齐到左边，这样在视觉上不会过多干扰：

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

当然，你改变什么样式取决于你想要达到的前端设计。你可以改成任何你喜欢的样式。

如果你现在测试一下，你会看到当我们向下滚动时标题在变化。

现在，头部动态的变化需要我们设置一个过渡，像这样：

transition: all 0.4s ease

结论

用CSS3去创建这个动态头部和用jQuery去切换类是非常简单的，这些在你的网站设计中都能增加良好的用户体验。

更重要的是，代码优雅降级，使网站的设计实现的更加完美。

1、创建html页面，打开记事本，输入如下截图所示的html代码，将文件保存为html结尾的文件，例如JsTest.html。

2、上一步保存完成后，双击文件即可使用默认浏览器运行页面，如果想使用指定浏览器运行，右键文件，选择【打开方式】->挑选任一已经安装的浏览器即可。

3、原生JS方式，详细代码与注释见截图。

4、原生JS方式，运行效果如下。

5、Jquery方式，必须要引入jquery文件才能使用，此处将jquery下载下来放到Content文件夹中，新的目录结构如下

-- Content

-- jquery-1.11.3.min.js

-- JsTest.html

6、Jquery方式，详细代码与相关注释见截图。

7、Jquery方式，运行效果如下。

一、选取DOM元素

jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

var $ = document.querySelectorAll.bind(document)

这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。

二、DOM *** 作

DOM本身就具有很丰富的 *** 作方法，可以取代jQuery提供的 *** 作方法。

尾部追加DOM元素。

// jQuery写法

$(parent).append($(child))

// DOM写法

parent.appendChild(child)

头部插入DOM元素。

// jQuery写法

$(parent).prepend($(child))

// DOM写法

parent.insertBefore(child, parent.childNodes[0])

删除DOM元素。

// jQuery写法

$(child).remove()

// DOM写法

child.parentNode.removeChild(child)

---