我的网站有一个主表单，我想将一个 div 停靠在主表单内内容区域的顶部。尽管滚动位置，此 div 应该始终可见。这可能吗？
一张图片会更好地解释它。
【问题讨论】：
我发布了sample 作为评论，所以我想我会写出一个完整的答案。
标记非常简单，但每个部分都有一些重要说明。
<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>
#page {
padding: 100px;
width: 300px;
}
#header,
#header-inner { /* Note #1 */
height: 100px;
width: 300px;
}
.scrolling { /* Note #2 */
position: fixed;
top: 0;
}
//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);
});
滚动标题将使用position: fixed附加到页面顶部，但这种样式会从内容流中移除内容，这将导致内容跳转，除非其容器保持原始高度。
样式属于 CSS，但是可能很难将某些元素与其原始位置正确对齐。您可能需要通过 JavaScript 动态设置 left 或 right css 属性。
【讨论】：
#header-inner 将位于页面顶部，即使 #header 在下方（至少在 Chrome 上）。滚动页面可以解决问题，但最初看起来很有趣。
position: sticky 直接从 CSS 解决问题。
你需要jQuery之类的，看我的小提琴here
编辑
jQuery函数，其中.form是内容div，.banner是停靠的div
$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
if (d < 0) {
$('.banner').addClass('fixed');
$('.banner').addClass('paddingTop');
} else {
$('.banner').removeClass('fixed');
$('.banner').removeClass('paddingTop');
}
});
.fixed {
position:fixed;
top:0px;
}
.paddingTop{
padding-top:110px;
}
【讨论】：
addClass、removeClass 或toggleClass。
从 2018 年 7 月开始，是时候重新审视这个问题了。 position: sticky 是专门针对像您这样的问题引入的，并且有 decent browser support。
它是这样工作的：
<div style="position: sticky; top: 0;"> Header </div>
其中top 是滚动时div 应停留在视口顶部的距离。 必须指定 top。 目前，bottom、left 或 right 等其他选项不起作用。
粘性 div 在所有方面都会像普通 div 一样，除非当您滚动过去时，它会粘在浏览器的顶部。
这里有一个jsfiddle 给你一个想法。
【讨论】：
我创建了一个新的小提琴，希望它有用。 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}
可能有比使用“幽灵”更好的解决方案，但我不知道是哪个。
【讨论】：
假设header div的顶部位置（到屏幕顶部）在开始时是100px，你可以这样做： 如果窗口的滚动顶部超过 100px，则将 header div 设置为与顶部 0px 固定位置； 如果 window 的滚动顶部小于 100px，则将 header div 的位置设置为默认布局。 使用jquery，它是这样的：
$(document).scroll(function() {
if ($(this).scrollTop() > 100) {
$('div#header').css({
"position" : 'fixed',
"top" : 0 });
} else {
$('div#header').css({ "position" : 'relative', "top" : 0 });
}
});
它是通过滚动事件实现的。
【讨论】：
使用 CSS 来固定它的位置。
假设您的 <div> 有一个 ID“topdiv”：
#topdiv {
position: fixed;
top: 0;
left: 0
}
请注意，您必须为内容设置 margin-top，因为固定的 div 将显示“覆盖”内容：
#contentarea { margin-top: 35px; }
检查这个fiddle。
【讨论】：
听起来您正在寻找的是具有两个属性的标题 div：
简而言之，有点像“max-top”（不作为 css 属性存在）。
如果您想完成所有这些，最快的方法可能涉及一些 JavaScript。 试试this；如果我稍后有时间，我会用更多代码更新它。
【讨论】：
我相信您正在寻找向下滚动时跟随的 div。可以在许多站点上的购物车中看到此实现。你可能想看看http://kitchen.net-perspective.com/open-source/scroll-follow/
另一个不错的链接是：http://jqueryfordesigners.com/fixed-floating-elements/
一些相关的滚动示例集合：http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/
【讨论】：
你可以试试这个 CSS。也许这就是你要找的东西：
html, body{
text-align:center;
margin:0px;
background:#ABCFFF;
height:100%;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
#header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width: 100%;
margin:auto;
}
.content-cont {
width:100%;
position:absolute; /* to place it somewhere on the screen */
top:60px;
bottom:60px; /* makes it lock to the bottom */
overflow:auto;
}
#content {
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
position:relative;
min-height:99.6%;
height:auto;
overflow: hidden;
margin:auto;
}
.footer-cont {
width:100%;
position:fixed;
bottom:0px;
}
#footer {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width: 100%;
margin:auto;
}
【讨论】：
在这个修改后的示例中，横幅 div 在滚动时停留在屏幕中，并且也停留在容器 div 中。 当容器 div 的底部到达屏幕顶部时，banner div 返回到相对位置并随着容器向上滚动 http://jsfiddle.net/SeeTS/198/
jQuery
$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
b = $('.banner').height();
f = $('.form').height();
if (d < 5) {
if(d < -(f-b)-15)
{
$('.banner').addClass('bottom');
$('.banner').removeClass('fixed');
}
else {
$('.banner').addClass('fixed');
$('.banner').removeClass('bottom');
}
}
else {
$('.banner').removeClass('fixed');
}
});
CSS
.form {
position:relative;
width:480px;
margin: 100px auto;
padding:10px;
}
p {
border:2px dotted #000;
}
.banner {
border-radius:8px;
background:#660000;
height:100px;
width:60px;
}
.fixed{
position:fixed;
top:5px;
}
.bottom {
position:absolute;
bottom:0px;
}
HTML
<table class="form" id="form">
<tr>
<td valign="top" width="70px">
<div class="banner"></div>
</td>
<td>
<p>Cum sociis natoque penatibus...</p>
</td>
</tr>
</table>
<div style="position:relative;height:500px;">
</div>
【讨论】：
以下解决方案对我有用：
HTML
<div class="sticky">
...
</div>
CSS
.sticky {
position: sticky;
top: 0;
height: 100%;
}
【讨论】：