我想创建一个div,它位于一个内容块的下面,但一旦页面已经滚动到足以接触其顶部边界,就会固定在原地并与页面滚动。
当前回答
以下是Josh Lee的回答的扩展版本。如果你想让div在侧边栏的右边,并浮动在一个范围内(即,你需要指定顶部和底部锚位置)。它还修复了一个bug,当你在移动设备上查看这个(你需要检查左滚动位置,否则div将移出屏幕)。
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var sl = $(window).scrollLeft();
var ot = $("#scroller-anchor-top").offset().top;
var ol = $("#scroller-anchor-top").offset().left;
var bt = $("#scroller-anchor-bottom").offset().top;
var s = $("#scroller");
if(st > ot) {
if (st < bt - 280) //280px is the approx. height for the sticky div
{
s.css({
position: "fixed",
top: "0px",
left: ol-sl
});
}
else
{
s.css({
position: "fixed",
top: bt-st-280,
left: ol-sl
});
}
} else {
s.css({
position: "relative",
top: "",
left: ""
});
}
};
$(window).scroll(move);
move();
}
其他回答
你可以添加额外的3行,这样当用户滚动回顶部时,div将保持在原来的位置:
代码如下:
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
$('.fixedElement').css({'position': 'relative', 'top': '200px'});
}
以下是Josh Lee的回答的扩展版本。如果你想让div在侧边栏的右边,并浮动在一个范围内(即,你需要指定顶部和底部锚位置)。它还修复了一个bug,当你在移动设备上查看这个(你需要检查左滚动位置,否则div将移出屏幕)。
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var sl = $(window).scrollLeft();
var ot = $("#scroller-anchor-top").offset().top;
var ol = $("#scroller-anchor-top").offset().left;
var bt = $("#scroller-anchor-bottom").offset().top;
var s = $("#scroller");
if(st > ot) {
if (st < bt - 280) //280px is the approx. height for the sticky div
{
s.css({
position: "fixed",
top: "0px",
left: ol-sl
});
}
else
{
s.css({
position: "fixed",
top: bt-st-280,
left: ol-sl
});
}
} else {
s.css({
position: "relative",
top: "",
left: ""
});
}
};
$(window).scroll(move);
move();
}
正如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;}。
这就是我用jquery做的。这都是根据堆栈溢出的各种答案拼凑起来的。这个解决方案缓存选择器以获得更快的性能,并且还解决了当粘性div变得粘性时的“跳跃”问题。
在jsfiddle: http://jsfiddle.net/HQS8s/上查看它
CSS:
.stick {
position: fixed;
top: 0;
}
JS:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$mainMenuBar = $('#mainMenuBar'),
$mainMenuBarAnchor = $('#mainMenuBarAnchor');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$mainMenuBar.addClass('stick');
$mainMenuBarAnchor.height($mainMenuBar.height());
}
else {
// Unstick the div.
$mainMenuBar.removeClass('stick');
$mainMenuBarAnchor.height(0);
}
});
});
接受的答案是有效的,但如果你在上面滚动,它不会回到之前的位置。它总是粘在顶部后,放在那里。
$(window).scroll(function(e) {
$el = $('.fixedElement');
if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
$('.fixedElement').css( 'position': 'fixed', 'top': '0px');
} else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
$('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
}
});
jleedev的响应应该工作,但我不能让它工作。他的示例页面也不起作用(对我来说)。
推荐文章
- 找到jQuery中所有未选中的复选框
- 在Javascript/jQuery中创建两个数字之间的所有整数数组,包括
- CSS /JS防止拖鬼图像?
- 我如何能得到一个元素的ID值与JavaScript?
- 为什么人们会写“throw 1;<不要邪恶>”和“for(;;);”在json响应前?
- 截断字符串直接JavaScript
- 我如何使用可选的链接与数组和函数?
- EINVRES请求https://bower.herokuapp.com/packages/失败,提示502
- 使用fetch进行基本身份验证?
- 如何从子组件内部更新React上下文?
- 如何将一个普通对象转换为ES6映射?
- scrollIntoView卷轴太远了
- Angular ng-repeat反过来
- 如何获得请求路径与表达请求对象
- 使用Handlebars 'each'循环访问父对象的属性