Question

所以我几乎不用问问题，这是我的第一个问题。但我只发现了一个类似问题的帖子。（我无法找到合并答案的方法）

我正在尝试使用我的项目完成iOS样式列表，其中一个项目的标题在前一个项目的底部变为绝对，而当前项目的标题变为固定。

我有这个工作，但它很挑剔...在我的例子中，我在第1项和第2项之间的过渡完美地工作。但是，1和初始标题之间的转换不起作用，除非您向上滚动非常慢（向下滚动总是有效）。

我认为这里的问题是Window.Scroll的处理速度不够快，所以例如.scrollTop（）会跳过300到200跳过250，因此在if语句中返回FALSE。

在这一点上，我没有想法让这个工作，也许这里的一些JS Wizards会知道我不知道的事情吗？

$(document).ready(function () {
$(window).scroll(function () {
    var index = Math.floor($(window).scrollTop() / $(window).height()) + 1;
    var top = ($("section").height() * index) - $(window).scrollTop();
    if (index > 1) {
        $(".menu").addClass('menu-fixed');
    } else {
        $(".menu").removeClass('menu-fixed');
    }

    if (top > 52 && top < $("section").height()) {
        $("#title" + (index - 1)).css({
            "position": "fixed",
                "width": "calc(100% - 40px)",
                "top": "0",
                "left": "40px"
        });
    } else if (top < 52) {
        $("#title" + (index - 1)).css({
            "position": "absolute",
                "width": "100%",
                "top": "calc(100% - 52px)",
                "left": "0px"
        });
    } else if (top == $("section").height()) {
        $("#title" + (index - 1)).css({
            "position": "absolute",
                "width": "100%",
                "top": "0",
                "left": "0px"
        });
    }
});
});

// REVISION

我已经将setTimeout（）合并到100ms间隔的函数集中，但我仍然遇到同样的问题。

// REVISION 2

我用requestAnimationFrame（）替换了setTimeout（）无济于事。 https://jsfiddle.net/ouu6hxuh/2/

Window.scroll太慢了？或者这是别的

0 个答案: