Html 我可以将 DIV 始终保留在屏幕上，但不始终处于固定位置吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8418583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I keep a DIV always on the screen, but not always in a fixed position?
提问by Rachel
I have a master form for my website, and I want to dock a div to the top of the content area inside the master form. This div should always be visible despite scroll position. Is this possible?
我的网站有一个主表单，我想将一个 div 停靠到主表单内的内容区域的顶部。尽管滚动位置，此 div 应始终可见。这可能吗？
A picture would explain it better.
一张图片会更好地解释它。
回答by zzzzBov
I posted a sampleas a comment, so I suppose I'll write out a full answer to this.
我发布了一个样本作为评论，所以我想我会写出完整的答案。
The markup is pretty straight-forward, but there are some important notes for each section.
标记非常简单，但每个部分都有一些重要的注释。
HTML
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
CSS
#page {
padding: 100px;
width: 300px;
}
#header,
#header-inner { /* Note #1 */
height: 100px;
width: 300px;
}
.scrolling { /* Note #2 */
position: fixed;
top: 0;
}
JavaScript
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);
});
Note #1
注意#1
The scrolling header will be attached to the top of the page using position: fixed, but this style will remove the content from content flow, which will cause the content to jump unless its container maintains the original height.
滚动标题将使用 附加到页面顶部position: fixed，但此样式将从内容流中删除内容，这将导致内容跳转，除非其容器保持原始高度。
Note #2
笔记2
Styles belong in CSS, however it may be difficult to properly align some elements with their original position. You may need to dynamically set the leftor rightcss property via JavaScript.
样式属于 CSS，但是可能很难将某些元素与其原始位置正确对齐。您可能需要通过 JavaScript动态设置left或rightcss 属性。
回答by ptriek
You'll need jQuery or the like, see my fiddle here
您将需要 jQuery 或类似工具，请在此处查看我的小提琴
Edit
编辑
jQuery function, where .formis the content div and .banneris the div that is docked
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;
}
回答by npas
As of July 2018 it is time to revisit this issue. position: stickywas introduced exactly for problems like yours, and has decent browser support.
截至 2018 年 7 月，是时候重新审视这个问题了。position: sticky正是针对像您这样的问题引入的，并且具有不错的浏览器支持。
It works like this:
它是这样工作的：
<div style="position: sticky; top: 0;"> Header </div>
where topis the distance to the viewport top the div should stay at when you scroll. Specifying topis mandatory.Other options like bottom, leftor rightdo notwork currently.
top滚动时 div 应停留在视口顶部的距离在哪里。指定top是强制性的。其他选项一样bottom，left或者right根本没有目前的工作。
The sticky div will act like a normal div in all ways except when you scroll past it, then it will stick to the top of the browser.
粘性 div 在所有方面都像普通 div 一样，除非你滚动它，然后它会粘在浏览器的顶部。
Here's a jsfiddleto give you an idea.
这是一个jsfiddle给你一个想法。
回答by Paolo
I created a new fiddle which I hope can be useful. The DIV can be arbitrary positioned in the page and stays visible when scrolling.
我创建了一个新的小提琴，我希望它有用。DIV 可以在页面中任意定位并在滚动时保持可见。
<div id="mydiv">
fixed div
</div>
<div class="ghost">
fixed div
</div>
CSS:
CSS：
#mydiv { position: fixed; background-color:Green; float:left; width:100%}
.ghost{opacity: 0}
probably there is a better solution than using a "ghost" but I do not know which.
可能有比使用“幽灵”更好的解决方案，但我不知道是哪个。
回答by zuo
Assume the top position(to the top of the screen) of the header div is 100px in the beginning, you can do like this: if the scroll top of window is over 100px, set the header div to fix position with top 0px; if the scroll top of window is less than 100px, set the position of the header div with the default layout. With jquery, it is sth like this:
假设开始时header div的顶部位置（到屏幕顶部）为100px，你可以这样做：如果窗口的滚动顶部超过100px，则将header div设置为top 0px固定位置；如果窗口的滚动顶部小于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 });
}
});
it is implemented with the scroll event.
它是通过滚动事件实现的。
回答by Chris
It sounds like what you're looking for is a header div with two properties:
听起来您正在寻找的是具有两个属性的标题 div：
- When it would normally be visible, it stays in its default position.
- When it would normally be invisible, it appears at the top of the screen.
- 当它通常可见时，它保持在默认位置。
- 当它通常不可见时，它会出现在屏幕顶部。
In short, something a little bit like "max-top" (which doesn't exist as a css property).
简而言之，有点像“max-top”（它不作为 css 属性存在）。
If you want to do all of that, the quickest way may involve some JavaScript. Try this; if I get some time later I'll update this with some more code.
如果您想完成所有这些，最快的方法可能涉及一些 JavaScript。试试这个；如果我稍后有时间，我会用更多代码更新它。
回答by Didier Ghys
Use CSS to fix its position.
使用 CSS 来固定它的位置。
Assuming your <div>has an ID "topdiv":
假设您<div>有一个 ID“topdiv”：
#topdiv {
position: fixed;
top: 0;
left: 0
}
Note you'll have to set a margin-top for the content, because the fixed div will display "over" the content:
请注意，您必须为内容设置边距顶部，因为固定的 div 将显示“覆盖”内容：
#contentarea { margin-top: 35px; }
Check this fiddle.
检查这个小提琴。
回答by jeff musk
I believe you are looking for a div that follows when you scroll down. This implementation can be seen for shopping carts on number of sites. You may want to look at http://kitchen.net-perspective.com/open-source/scroll-follow/
我相信您正在寻找向下滚动时跟随的 div。对于许多站点上的购物车，可以看到此实现。你可能想看看http://kitchen.net-perspective.com/open-source/scroll-follow/
Another good link is: http://jqueryfordesigners.com/fixed-floating-elements/
另一个不错的链接是：http: //jqueryfordesigners.com/fixed-floating-elements/
Some related collection of scroll examples: http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/
一些相关的滚动示例集合：http: //webdesign14.com/30-tutorials-and-plugins-jquery-scroll/
回答by jose011385
You can try this CSS. Maybe it is what you are looking for:
你可以试试这个 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;
}
回答by Grady N.
in this modified example banner div stays in the screen when scrolling and also stays in the container div. when the container divs bottom reaches to the top of the screen, banner div returns to relative position and scrolls up with container http://jsfiddle.net/SeeTS/198/
在这个修改后的示例中，滚动时横幅 div 保留在屏幕中，并且还保留在容器 div 中。当容器 div 底部到达屏幕顶部时，横幅 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
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
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>
