html之div始终停留在屏幕中间部分,css – 我可以永远保持DIV在屏幕上,但并不总是处于固定位置？...

我发布了一个

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属性。