在滚动页面时将页面元素保留在视图中
问题描述:
我正在寻找一种解决方案,在滚动页面的其余部分时保留元素的视图。在滚动页面时将页面元素保留在视图中
我不想重新发明*,所以我想了解社区是否知道罐装解决方案。
我想将其应用于我拥有的巨大表格,并且希望用户能够在向下滚动时继续查看表格标题。
只是为了澄清,我正在寻找的是不同于滚动表与溢出CSS设置。我无法使用可滚动表的原因是因为该方法在数千行中变得非常缓慢。此外,该方法在iPhone浏览器上无法正常工作。
理想情况下,我希望它能够在用户向下滚动页面时,表格的标题会“粘”在浏览器视图的顶部边缘。相反,如果用户向后滚动,它将继续粘在那里,直到它返回到标题开始的原始位置。
答
您是否在寻找#element { position: fixed; ... }
?您可以使用JS在固定,相对和绝对之间切换。
http://www.w3schools.com/cssref/pr_class_position.asp
编辑
看看他们是如何做到这一点的[我希望他们不要介意] http://www.zocdoc.com/search.aspx?dr_specialty=98&address=Enter+a+City+and+State%2C+or+Zip&insurance_carrier=-1&insurance_plan=-1&button.x=166&button.y=21
他们使用jQuery,它似乎并不复杂,他们也有一个IE6解决方法
$(function() {
var msie6 = $.browser.msie && $.browser.version < 7;
if (!msie6) {
var top = $('#scroll_header').offset().top
- parseFloat($('#scroll_header').css('margin-top').replace(
/auto/, 0));
$(window).scroll(function(event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#scroll_header').addClass('fixed');
} else {
$('#scroll_header').removeClass('fixed');
}
});
var y = $(this).scrollTop();
if (y >= top) {
$('#scroll_header').addClass('fixed');
} else {
$('#scroll_header').removeClass('fixed');
}
} else {
setInterval("checkScroll()", 100);
}
});
function checkScroll() {
ie6top = $('#scroll_header_wrapper').offset().top;
if ($(document).scrollTop() > ie6top) {
$('#scroll_header').css("top", $(document).scrollTop() - ie6top + "px");
$('#scroll_header').css("visibility", "visible");
} else {
$('#scroll_header').css("visibility", "hidden");
}
}
是的,但它需要workmaticaly,因为它需要能够吨o检测何时开始移动元素,因为我不想移动元素直到需要(即:当元素由于滚动而开始移出视图时)我希望能够找到一个JavaScript库或jQuery插件可以实现这种行为。我可以编码,但这需要我几天。如果已经有东西存在,它会使我无法重新发明*。 – 7wp 2010-08-16 19:58:37
看看我粘贴的新代码,您显然需要对其进行一些修改,但它应该为您节省几天时间:-)。窗口滚动事件是关键。 – sjobe 2010-08-16 21:38:39
这就是我正在寻找的。这应该给我一个良好的开端。谢谢。 – 7wp 2010-08-18 05:34:11