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

html-css018

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

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去切换类是非常简单的，这些在你的网站设计中都能增加良好的用户体验。

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

其实用postion: fixed并不是很方便，用position: sticky会更容易达到我们的目的。

只需要给头部设置：

即可。

将position设置为sticky，那么头部组件还会占有着上方空间，所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性，那么body下面的组件也要算出导航栏的长度，再设置top属性，这样一来就麻烦了很多