Question

我实际上正在修复此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（）方法允许我们检索元素相对于偏移父元素的当前位置。

所以例如我的最后一个块是从顶部开始的6000px，如果我中途滚动并重新加载页面，它会告诉我我的最后一个块是3000px。由于该职位是相对于文件，它解释了原因。我猜这个位置应该是相对于身体的。

有人会有一个像偏移一样容易的解决方案但是可以计算溢出内的位置吗？

我考虑计算每个块的高度并对每个块进行求和。但我希望有更好的。

更新：

这里是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'});
}

Answer 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;

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

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

1 个答案: