在滚动上交换内容但保持屏幕固定

Question

我正在努力实现这个概念，但是在尝试了一些长期的，错综复杂的方法后仍然有些沮丧，这些方法仍然会在移动设备，Firefox等上造成故障。

这个概念是这样的：

页面左侧和右侧有两个标题。左边的那个是首先聚焦的，它的文字是可见的，而标题2是灰色的，它的文字是隐藏的。

然后，如果向下滚动，请将焦点切换到标题2，显示其文本，然后隐藏标题1的文本。

这是不是干净利落的？它起初是一个有趣的“假设”概念，我不能放手。

目前，我正在尝试这样的事情来捕捉滚动：

var lastScrollTimeout;
var scrollDetectionLocked = false;
var lastScrollTop = 0;
$(window).bind('scroll', function(e) {

    // do nothing if still locked
    if ( scrollDetectionLocked === true )
        return false;

    // lock it
    scrollDetectionLocked = true;

    // perform operations if not locked
    var direction;
    var st = $(this).scrollTop();
    if (st > lastScrollTop)// scrolled down
        direction = -1;
    else // scrolled up
        direction = 1;

    lastScrollTop = st;

    console.log('doScroll('+direction+')');



    clearTimeout(lastScrollTimeout)
    lastScrollTimeout = setTimeout(function(){
        // unlock it after certain time
        scrollDetectionLocked = false;
    }, timeoutBetweenScrolls);


});

doScroll()函数只会看到当前加载的标题/文字，并相应加载下一个/上一个标题/文本。

但是，控制台输出有时是错误的，它应该doScroll(1)（向上）应该是doScroll(-1)（向下）等等。在我看来，这不是一个干净的解决方案。

我认为问题是由于屏幕上所有元素都已修复而导致的，唯一可滚动的项目是名为.fake-scroll的元素。这开始是针对不允许e.originalEvent.wheelDelta的移动电话的修复，而且再次看起来很麻烦。

我搞乱了视差滚动，但我认为不能用它来实现这种效果。任何帮助将不胜感激。

除了“Main | Alt”导航链接没有保持固定且“更多”子菜单不起作用外，此示例显示了我的最后一个半工作示例。 https://jsfiddle.net/0vju51ba