Jquery，获取元素在溢出内的位置：隐藏答案

【问题标题】：Jquery, get position of element inside overflow:hiddenJquery，获取元素在溢出内的位置：隐藏
【发布时间】：2014-10-14 00:28:59
【问题描述】：

我实际上正在修复这个 website 上的一些东西

由于 IOS 上的问题，我不得不修改实际代码，以便能够获得具有固定位置的完整背景图像。（尚未在主机上更新，您可以看到我正在谈论的实际问题，2014 年 8 月 20 日）。

我从CSS tricks找到了解决方案

html { 
    background: url(path-to-img) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}
body
{
    height:100%;
    overflow: auto;
}

此解决方案影响了我的 javascript。我必须用 Jquery offset() 计算位置

.offset() 方法允许我们检索元素的当前位置相对于文档。

.position() 方法允许我们检索元素相对于偏移父元素的当前位置。

例如，我的最后一个区块距离顶部 6000 像素，如果我滚动到一半并重新加载页面，它会告诉我我的最后一个区块在 3000 像素处。由于该位置是相对于文档的，因此它正在解释原因。我猜这个位置应该是相对于身体的。

有没有人有一个像偏移一样简单但可以计算溢出内位置的解决方案？

我考虑过计算每个块的高度并为每个块做一个总和。但我希望有比这更好的。

更新：

这里是javascript：

alert($('#contact').offset().top+' - '+$('#contact').position().top);

在其上下文中，需要使用位置的脚本之一：

var pos_contact = $('#contact').offset().top - 100;
var pos_end_contact = $('#contact').offset().top + $('#contact').height() - 100;

if(pos_contact < $(this).scrollTop()){
    $('.menu-link').removeClass('active');
    $('#menu-contact').addClass('active');
    var width_menu_slide = $('#menu-contact').width() + 30;
    var pos_menu_slide = $('#menu-contact').offset().left - 1;
    $('#slide-to-active').css({'left' : pos_menu_slide+'px', 'width' : width_menu_slide+'px'});
}

【问题讨论】：

你想得到什么相对于什么的偏移量？另外，如果您可以发布您的 javascript，那将很有帮助。
它是相对于正文的，而不是相对于文档的。好的，我会更新帖子。
我并没有真正得到你想要完成的事情。无论你是否向下滚动，offset().top 总是相同的。
您必须了解偏移量是相对于文档的。由于 html 标签具有溢出隐藏的属性，如果您在不同的滚动位置重新加载，偏移量将具有不同的位置。我这样做的唯一原因（我真的不喜欢这样做）是因为 IOS 不能很好地处理具有固定位置的完整背景图像。
如果你滚动它确实不会改变，只有当你在实际滚动位置重新加载时。

标签： jquery html css position

【解决方案1】：

在等待更好的答案时。

我所说的解决方案之一是对前一个块的高度求和。

这里是该解决方案在其上下文中的实施。它似乎像这样工作。

var pos_home = $('#welcome').height() - 100;
var pos_end_home = pos_home + $('#home').height() - 101;

var pos_about = pos_end_home + 1;
var pos_end_about = pos_about + $('#about').height() - 101;

var pos_process = pos_end_about + 1;
var pos_end_process = pos_process + $('#process').height() - 101;

var pos_service = pos_end_process + 1;
var pos_end_service = pos_service + $('#service').height() - 101;

var pos_portfolio = pos_end_service + 1;
var pos_end_portfolio = pos_portfolio + $('#portfolio').height() + $('#custom-theme').height() - 101;

var pos_contact = pos_end_portfolio + 1;

如果有人对此有更好的答案，我很乐意接受。

【讨论】：