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

HTML5+CSS3 欲思 4评论

在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框顶部标题菜单等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。下面就说一下如何用CSS3jQuery创建一个粘性元素的设计。

如何用CSS3和jQuery创建一个动态的锁定组头(sticky header)

网站设计中流行的趋势总是来来去去的。那些停留网站时间最长的,就是他们解决了一个特别的问题。而这种趋势的流行,也是因为这个原因。

这种趋势现在之所以受欢迎,最主要的还是因为粘性元素;元素通常表现在我们滚动页面的时候,它们会维持在页面上的某些地方一直停留。

这种趋势一开始用的是侧边栏,不过现在已经越来越流行用在头部了。这是为什么呢?因为头部往往包含了导航信息,而导航是一直深受用户欢迎的。

在本教程中,我们将创建一个维持在可视化页面头部的标题,让它在用户向下滚动页面时不会干预正文的内容。

这是一个已经做好的示例,大家可以看看:

如果想用这个示例的Demo,可以在这里下载

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

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

注:原文作者 Sara Vieira。欲思蹩脚翻译,请大家多多包涵。

转载请注明:欲思博客 » 如何用CSS3和jQuery创建一个动态的粘性头部(sticky header)

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (11)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 粘性元素是否意味着该段CSS的代码展现的效果就是随着窗口浮动而浮动呢?
    室内光缆2014-05-14 15:21 回复