查找元素与可滚动div顶部的交汇处

我有一个可滚动的div容器，可容纳多个“页面”（或div多个）。

我的目标是在任何给定的时刻弄清楚它在红色容器内到达可滚动容器顶部的位置。因此它可以是滚动事件上的常量，也可以是触发此任务的按钮。

例如。如果我在的红色框之一内有绝对div元素top:50px。如果我滚动到该div元素到达可滚动容器顶部的位置。触发器应该说我在50px我的红色容器中。

我很难掌握如何完成此操作，但是我尝试了以下方法：

$("#pageContent").scroll(function(e) {
    console.log($(this).scrollTop());   
});

但这并没有考虑到单独的页面，我也不认为它完全准确取决于比例。任何指导或帮助将不胜感激。

这是我的代码和一个jsfiddle，可以更好地支持我的问题。

注意：如有必要，我在项目中使用了scrollspy，因此可以确定需要检查的红色容器。

的HTML

<div id="pageContent" class="slide" style="background-color: rgb(241, 242, 247); height: 465px;">
    <div id="formBox" style="height: 9248.627450980393px;">
        <div class="trimSpace" style="width: 1408px; height: 9248.627450980393px;">
            <div id="formScale" style="width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;">
                <form action="#" id="XaoQjmc0L51z_form" autocomplete="off">
                    <div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_1">
                        <div class="formContent">
                            <div class="formBackground">
                                <div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
                            </div>
                        </div>
                    </div>
                    <div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_2">
                        <div class="formContent">
                            <div class="formBackground"><div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">This should still say 50px</div></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

的CSS

#pageContent {
    position:relative;
    padding-bottom:20px;
    background-color:#fff;
    z-index:2;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
#formBox {
    display: block;
    position: relative;
    height: 100%;
    padding: 15px;
}
.trimSpace {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#formScale::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formScale {
    position:relative;
    width:816px;
    margin:0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
}
.formContainer {
    position:relative;
    margin : 0 auto 15px auto;
    padding:0;
}
.formContent {
    position:absolute;
    width:100%;
    height:100%;
}
.formBackground {
    width:100%;
    height:100%;
    background-color:red;
}

JS

var PAGEWIDTH = 816;

$(window).resize(function (e) {
    zoomProject();
    resize();
});

function resize() {
    $("#pageContent").css('height', window.innerHeight - 45 + 'px');
}

function zoomProject() {
    var maxWidth = $("#formBox").width(),
        percent = maxWidth / PAGEWIDTH;
    $("#formScale").css({
        'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + ')',
        '-ms-transform': 'scale(' + percent + ')'
    });
    $(".trimSpace").css('width', (PAGEWIDTH * percent) + 'px');
    $("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}

zoomProject();
resize();

编辑：

我认为我在传达我想完成的目标方面做得不好。

目前有两个.formContainer。当我滚动时#pageContainer，.formContainerdiv向上移动#pageContainer。

因此，我想实现的是，当用户单击“ ME”按钮或#click（如下面的小提琴所示）时，我想知道该按钮.formContainer触及的顶部的位置#pageContainer。

我的确在我的实际应用程序中使用了滚动间谍，所以我知道哪个.formContainer最接近顶部。因此，如果您只想定位一个.formContainer，那就很好。

我以这些白色div元素为例。如果我正在滚动#pageContainer，并且在滚动时该白色div元素位于屏幕顶部，并且我单击“ ME”，则单击触发应该会提醒我，.formContainer触摸顶部#pageContainer距顶部50px。如果红色容器正好接触的顶部#pageContainer，则应该说它离顶部0px。

我希望这有助于消除一些误解。

这是更新的jsfiddle，显示了我想执行的操作。