我发布了一个
sample作为评论,所以我想我会写出一个完整的答案。
标记很简单,但每个部分都有一些重要的注释。
HTML
CSS
#page {
padding: 100px;
width: 300px;
}
#header,#header-inner { /* Note #1 */
height: 100px;
width: 300px;
}
.scrolling { /* Note #2 */
position: fixed;
top: 0;
}
JavaScript的
//jQuery used for simplicity
$(window).scroll(function(){
$('#header-inner').toggleClass('scrolling',$(window).scrollTop() > $('#header').offset().top);
//can be rewritten long form as:
var scrollPosition,headerOffset,isScrolling;
scrollPosition = $(window).scrollTop();
headerOffset = $('#header').offset().top;
isScrolling = scrollPosition > headerOffset;
$('#header-inner').toggleClass('scrolling',isScrolling);
});
注1
滚动标题将使用position:fixed连接到页面的顶部,但此样式将从内容流中删除内容,这将导致内容跳转,除非其容器保持原始高度。
笔记2
样式属于CSS,但可能难以将某些元素与其原始位置正确对齐。您可能需要通过JavaScript动态设置左或右css属性。