我想创建一个div,它位于一个内容块的下面,但一旦页面已经滚动到足以接触其顶部边界,就会固定在原地并与页面滚动。
当前回答
这里还有一个版本供那些对其他版本有问题的人尝试。它结合了这个重复问题中讨论的技术,并动态生成所需的帮助器div,因此不需要额外的HTML。
CSS:
.sticky { position:fixed; top:0; }
JQuery:
function make_sticky(id) {
var e = $(id);
var w = $(window);
$('<div/>').insertBefore(id);
$('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
var n = e.next();
var p = e.prev();
function sticky_relocate() {
var window_top = w.scrollTop();
var div_top = p.offset().top;
if (window_top > div_top) {
e.addClass('sticky');
n.show();
} else {
e.removeClass('sticky');
n.hide();
}
}
w.scroll(sticky_relocate);
sticky_relocate();
}
要使元素具有粘性,请执行以下操作:
make_sticky('#sticky-elem-id');
当元素变得粘滞时,代码管理剩余内容的位置,以防止它跳到粘滞元素留下的间隙中。当滚动到粘滞元素上方时,它还将粘滞元素返回到其原始的非粘滞位置。
其他回答
这不是一个确切的解决方案,但却是一个很好的选择
这个CSS只有屏幕滚动条顶部。解决了所有的问题,只有CSS,没有JavaScript,没有JQuery,没有脑力劳动(lol)。
享受我的小提琴:D所有的代码都包括在那里:)
CSS
#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}
.w {
width: 900px;
margin: 0 auto;
margin-bottom: 40px;
}<br type="_moz">
把内容放长一点,这样你就能看到效果了:) 哦,推荐人也在里面,因为他值得表扬
CSS只有屏幕滚动条的顶部
我的解决方案有点啰嗦,但它处理变量定位从左边缘居中布局。
// Ensurs that a element (usually a div) stays on the screen
// aElementToStick = The jQuery selector for the element to keep visible
global.makeSticky = function (aElementToStick) {
var $elementToStick = $(aElementToStick);
var top = $elementToStick.offset().top;
var origPosition = $elementToStick.css('position');
function positionFloater(a$Win) {
// Set the original position to allow the browser to adjust the horizontal position
$elementToStick.css('position', origPosition);
// Test how far down the page is scrolled
var scrollTop = a$Win.scrollTop();
// If the page is scrolled passed the top of the element make it stick to the top of the screen
if (top < scrollTop) {
// Get the horizontal position
var left = $elementToStick.offset().left;
// Set the positioning as fixed to hold it's position
$elementToStick.css('position', 'fixed');
// Reuse the horizontal positioning
$elementToStick.css('left', left);
// Hold the element at the top of the screen
$elementToStick.css('top', 0);
}
}
// Perform initial positioning
positionFloater($(window));
// Reposition when the window resizes
$(window).resize(function (e) {
positionFloater($(this));
});
// Reposition when the window scrolls
$(window).scroll(function (e) {
positionFloater($(this));
});
};
你可以添加额外的3行,这样当用户滚动回顶部时,div将保持在原来的位置:
代码如下:
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
$('.fixedElement').css({'position': 'relative', 'top': '200px'});
}
截至2017年1月和Chrome 56的发布,大多数常用的浏览器都支持CSS中的position: sticky属性。
#thing_to_stick {
position: sticky;
top: 0px;
}
在火狐和Chrome浏览器中都是如此。
在Safari中,你仍然需要使用position: -webkit-sticky。
Polyfills可用于Internet Explorer和Edge;https://github.com/wilddeer/stickyfill似乎是个不错的网站。
您已经在谷歌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和demo上的文章以及Mozilla文档。