Question

我正在尝试构建像这样的函数：

var t =$('#top');
var q1=$('#fe1');
var q2=$('#fe2');
var q3=$('#fe3');
var q4=$('#fe4');
var q5=$('#fe5');
var win = $(window);
var doc=$(document);
var wins = win.scrollTop();
var docs = doc.scrollTop();


function next (){
    if (wins == docs) {
        q1.ScrollTo();
    }
    else if (wins == q1.scrollTop()) {
        q2.ScrollTo();
    }
    else if (wins == q2.scrollTop()) {
            q3.ScrollTo();
    }
    else if (wins == q3.scrollTop()) {
        q4.ScrollTo();
    }
    else if (wins == q4.scrollTop()) {
        q5.ScrollTo();
    }
}

我想滚动到下一部分。为此，代码检查我在哪个部分，因此它知道要滚动到哪个部分。但我认为$(window).scrollTop()不是我想要的。

我想要一个声明，它返回页面顶部和我正在显示的顶部之间的距离。也许我必须做一个更复杂的操作。你知道我怎么能得到这个？

感谢。

Answer 1

即使没有jQuery或类似的纯JavaScript，这个问题也很容易解决。这是你的例子：

var next = (function (sections) {

    function getTop(node) {
        return node ? node.offsetTop + getTop(node.offsetParent) : 0;
    }

    return function () {
        var i, nodeTop, top = window.pageYOffset;

        for (i = 0; i < sections.length; i += 1) {
            nodeTop = getTop(document.getElementById(sections[i]));
            if (nodeTop > top) {
                window.scrollTo(window.pageXOffset, nodeTop);
                return;
            }
        }
    };
}(['top', 'fe1', 'fe2', 'fe3', 'fe4', 'fe5']));

代码很通用，所以你可以传递你想要的任何部分ID（它们只需要以正确的顺序出现）。

我们在window.pageYOffset和window.scrollTo()使用两个标准DOM属性/函数来获取和设置窗口的垂直偏移量（window.pageXOffset用于保持水平偏移量相同）。为了得到段开始的垂直偏移，我使用简单的递归定义了getTop函数（jQuery使用类似的代码IMHO）。

结果函数next()在自调整闭包中定义，以隐藏实现和帮助函数。要在运行此代码后使用它，只需调用

即可

next();

我测试了这段代码，所以我非常有信心：）。

是$（window）.scrollTop（）正确的陈述？

1 个答案: