我可以将DIV始终显示在屏幕上，但不能总是放在固定位置吗？
我可以将DIV始终显示在屏幕上，但不能总是放在固定位置吗？
提问于 2011-12-08 00:15:48
我的网站有一个主窗体，我想将一个div停靠到主窗体内内容区域的顶部。无论滚动位置如何，此div都应始终可见。这个是可能的吗？
一张图片可以更好地说明这一点。
回答 8
Stack Overflow用户
回答已采纳
发布于 2011-12-08 22:54:19
我发布了一个sample作为评论，所以我想我会写出一个完整的答案。
标记非常简单，但每个部分都有一些重要的说明。
HTML
<div id="page">
<div id="header">
<div id="header-inner"> <!-- Note #1 -->
<img src="http://placehold.it/300x100" />
</div>
</div>
<div id="content">
<!-- Some Content Here -->
</div>
</div>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动态设置left或right css属性。
Stack Overflow用户
发布于 2011-12-08 00:29:52
我创造了一个新的小提琴，我希望它能有用。DIV可以在页面中任意定位，并在滚动时保持可见。
<div id="mydiv">
fixed div
</div>
<div class="ghost">
fixed div
</div>CSS：
#mydiv { position: fixed; background-color:Green; float:left; width:100%}
.ghost{opacity: 0}也许有一个比使用“幽灵”更好的解决方案，但我不知道是哪一个。
Stack Overflow用户
发布于 2011-12-08 00:33:39
假设标题div的顶部位置(屏幕顶部)在开始时为100px，可以这样做:如果窗口的滚动顶部超过100px，则将标题div设置为固定位置，顶部为0px；如果窗口的滚动顶部小于100px，则将标题div的位置设置为默认布局。对于jquery，它是这样的：
$(document).scroll(function() {
if ($(this).scrollTop() > 100) {
$('div#header').css({
"position" : 'fixed',
"top" : 0 });
} else {
$('div#header').css({ "position" : 'relative', "top" : 0 });
}
});它是通过scroll事件实现的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8418583
复制相关文章
相似问题