我想创建一个div，它位于一个内容块的下面，但一旦页面已经滚动到足以接触其顶部边界，就会固定在原地并与页面滚动。
当前回答
接受的答案是有效的，但如果你在上面滚动，它不会回到之前的位置。它总是粘在顶部后，放在那里。
$(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的响应应该工作，但我不能让它工作。他的示例页面也不起作用(对我来说)。
其他回答
接受的答案是有效的，但如果你在上面滚动，它不会回到之前的位置。它总是粘在顶部后，放在那里。
$(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的响应应该工作，但我不能让它工作。他的示例页面也不起作用(对我来说)。
你可以简单地使用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时，元素会粘在浏览器窗口的顶部，因为是固定放置的。
粘到页脚碰到div:
function stickyCostSummary() {
var stickySummary = $('.sticky-cost-summary');
var scrollCostSummaryDivPosition = $(window).scrollTop();
var footerHeight = $('#footer').height();
var documentHeight = $(document).height();
var costSummaryHeight = stickySummary.height();
var headerHeight = 83;
var footerMargin = 10;
var scrollHeight = 252;
var footerPosition = $('#footer').offset().top;
if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
stickySummary.removeAttr('style');
stickySummary.addClass('fixed');
} else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
stickySummary.removeClass('fixed');
stickySummary.css({
"position" : "absolute",
"top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
});
} else {
stickySummary.removeClass('fixed');
stickySummary.css({
"position" : "absolute",
"top" : "0"
});
}
}
$window.scroll(stickyCostSummary);
在javascript中，你可以做:
var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";
为回答这个问题提供的信息可能对你有帮助，埃文:
检查滚动后元素是否可见
基本上，只有在验证document.body.scrollTop值等于或大于元素的顶部之后，才希望修改元素的样式，将其设置为fixed。
