我想创建一个div,它位于一个内容块的下面,但一旦页面已经滚动到足以接触其顶部边界,就会固定在原地并与页面滚动。
当前回答
你可以添加额外的3行,这样当用户滚动回顶部时,div将保持在原来的位置:
代码如下:
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
$('.fixedElement').css({'position': 'relative', 'top': '200px'});
}
其他回答
这是另一种选择:
JAVASCRIPT
var initTopPosition= $('#myElementToStick').offset().top;
$(window).scroll(function(){
if($(window).scrollTop() > initTopPosition)
$('#myElementToStick').css({'position':'fixed','top':'0px'});
else
$('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});
你的#myElementToStick应该以position:absolute CSS属性开始。
正如Josh Lee和Colin’t Hart所说,你可以选择使用position: sticky;上图:0;应用到你想要滚动的div…
另外,你要做的唯一一件事就是把它复制到你的页面顶部,或者把它格式化为适合外部CSS表:
<style>
#sticky_div's_name_here { position: sticky; top: 0; }
</style>
只需将#sticky_div的name_here替换为您的div的名称,即,如果您的div是<div id="example">,您将放置#example{位置:sticky;上图:0;}。
这里还有一个版本供那些对其他版本有问题的人尝试。它结合了这个重复问题中讨论的技术,并动态生成所需的帮助器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,将你的元素定位为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时,元素会粘在浏览器窗口的顶部,因为是固定放置的。
我和你有同样的问题,最终制作了一个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