我想创建一个 div，它位于内容块下方，但是一旦页面滚动到足以接触其顶部边界，就会固定到位并随页面滚动。
滚动到屏幕后，如何使 div 粘在屏幕顶部？
IT技术
javascript
jquery
css
scroll
positioning
2021-02-05 03:05:05
6个回答
您可以简单地使用 css，将您的元素定位为fixed：
.fixedElement {
background-color: #c0c0c0;
position:fixed;
top:0;
width:100%;
z-index:100;
}
编辑：您应该拥有绝对位置的元素，一旦滚动偏移量到达该元素，则应将其更改为固定，并将顶部位置设置为零。
您可以使用scrollTop函数检测文档的顶部滚动偏移：
$(window).scroll(function(e){
var $el = $('.fixedElement');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 200 && isPositionFixed){
$el.css({'position': 'static', 'top': '0px'});
}
});
当滚动偏移量达到 200 时，元素会粘在浏览器窗口的顶部，因为是固定放置的。
您已经在 Google Code 的问题页面和（最近才）在 Stack Overflow 的编辑页面上看到了这个示例。
当您向上滚动时，CMS 的回答不会恢复定位。这是从 Stack Overflow 无耻地窃取的代码：
function moveScroller() {
var $anchor = $("#scroller-anchor");
var $scroller = $('#scroller');
var move = function() {
var st = $(window).scrollTop();
var ot = $anchor.offset().top;
if(st > ot) {
$scroller.css({
position: "fixed",
top: "0px"
});
} else {
$scroller.css({
position: "relative",
top: ""
});
}
};
$(window).scroll(move);
move();
}
<div id="sidebar" style="width:270px;">
<div id="scroller-anchor"></div>
<div id="scroller" style="margin-top:10px; width:270px">
Scroller Scroller Scroller
</div>
</div>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
和一个简单的现场演示。
一个新生的、无脚本的替代方案是position: sticky，Chrome、Firefox 和 Safari 都支持它。请参阅有关 HTML5Rocks和演示的文章以及Mozilla 文档。
截至 2017 年 1 月和 Chrome 56 发布，大多数常用浏览器都支持position: stickyCSS 中的属性。
#thing_to_stick {
position: sticky;
top: 0px;
}
在 Firefox 和 Chrome 中对我有用。
在 Safari 中，您仍然需要使用position: -webkit-sticky.
Polyfill 可用于 Internet Explorer 和 Edge；https://github.com/wilddeer/stickyfill似乎是一个不错的选择。
我和你有同样的问题，最终制作了一个 jQuery 插件来解决它。它实际上解决了人们在此处列出的所有问题，此外它还添加了一些可选功能。
选项
stickyPanelSettings = {
// Use this to set the top margin of the detached panel.
topPadding: 0,
// This class is applied when the panel detaches.
afterDetachCSSClass: "",
// When set to true the space where the panel was is kept open.
savePanelSpace: false,
// Event fires when panel is detached
// function(detachedPanel, panelSpacer){....}
onDetached: null,
// Event fires when panel is reattached
// function(detachedPanel){....}
onReAttached: null,
// Set this using any valid jquery selector to
// set the parent of the sticky panel.
// If set to null then the window object will be used.
parentSelector: null
};
https://github.com/donnyv/sticky-panel
演示： http : //htmlpreview.github.io/? https: //github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
这是没有jquery 的方法（更新：请参阅其他答案，您现在只能使用 CSS 执行此操作）
var startProductBarPos=-1;
window.onscroll=function(){
var bar = document.getElementById('nav');
if(startProductBarPos<0)startProductBarPos=findPosY(bar);
if(pageYOffset>startProductBarPos){
bar.style.position='fixed';
bar.style.top=0;
}else{
bar.style.position='relative';
}
};
function findPosY(obj) {
var curtop = 0;
if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
curtop += obj.offsetTop;
}
else if (obj.y)
curtop += obj.y;
return curtop;
}* {margin:0;padding:0;}
.nav {
border: 1px red dashed;
background: #00ffff;
text-align:center;
padding: 21px 0;
margin: 0 auto;
z-index:10;
width:100%;
left:0;
right:0;
}
.header {
text-align:center;
padding: 65px 0;
border: 1px red dashed;
}
.content {
padding: 500px 0;
text-align:center;
border: 1px red dashed;
}
.footer {
padding: 100px 0;
text-align:center;
background: #777;
border: 1px red dashed;
}<header class="header">This is a Header</header>
<div id="nav" class="nav">Main Navigation</div>
<div class="content">Hello World!</div>
<footer class="footer">This is a Footer</footer>