pageYoffset＆gt; = div.offsetTop时触发事件

Question

我正在为我的网站进行一个简单的导航，它使用window.pageYoffset更改固定到文档右侧的唯一导航按钮上的标签，其次，单击按钮上的操作滚动到顶部位置基于标签的相应容器。

注意：

1. 容器A是动态的，高度根据高度而变化 收到的图像。
2. 容器B有固定的高度，我还没决定 什么是高度，但只是获得这个功能 我正在考虑700px。

如何计算pageYoffset，以便仅在pageYoffset＆gt; = containerB.offset.top时触发标签更改？我不确定这种情况是否得到满足，或者我正在追逐一只野鹅。有没有更好的方法来解决这个问题。

当前解决方案

这是我当前的解决方案，但当滚动条甚至不接近ContainerB的topPosition时，标签更改会触发。我附上了一张描绘页面的图片。

window.addEventListener( "optimizedScroll", function optimizedScrollFunc( ) {
    var self = voApp,
        gotoTop = document.getElementById( "cc-gototop-js" ),
        winPageYOffset = window.pageYOffset,
        windowInnerHeight = window.innerHeight,
        documentScrollHeight = document.body.scrollHeight,
        topStoriesLoadMore = document.getElementById( "cc-tsLoadMoreWrapper-js" );
        dom.glanceUIDiv = document.getElementById( "cc-glanceWrapper-js" ).offsetTop;

    console.log((winPageYOffset + windowInnerHeight), documentScrollHeight);

    if ( winPageYOffset + windowInnerHeight >= documentScrollHeight ) {
        console.log("FIRED");
        $( gotoTop )
            .removeClass( "cc-thisWeek" )
            .addClass( "cc-today" );
        $( topStoriesLoadMore )
            .removeClass( "cc-tsLoadMoreWrapperVisible" );
    }
    if ( winPageYOffset < 200 ) {
        $( gotoTop )
            .removeClass( "cc-today" )
            .addClass( "cc-thisWeek" );
    }
} );
appUtil.f_throttle( "scroll", "optimizedScroll" );

Page Wireframe