Question

我正在制定时间表。到目前为止，它非常简单。我遇到了一些问题。

我有一个ul，它有一个固定的高度以允许滚动。有＆＃34;标签＆＃34; （li.dayLabel）与ul分隔小时。我想要做的就是让它在标签滚动到视图之外时，它会将占位符中的文本更改为它的文本。一旦有效，我需要它反向工作。因此，当他们将滚动标记回视图时，它会更新占位符。基本上，我试图使占位符成为可用项的标题，直到另一个标签滚出视图。这是从顶部滚动。因此，当您向下滚动列表时，占位符将是您正在查看的部分的标题，直到您到达另一个部分并取而代之。然后当你向下滚动时，我需要它用以前的li.dayLabel替换文本，以便这些部分保持井井有条。我希望这是有道理的。

你可以通过查看我所依据的original来了解我想要做的事情。请注意当您向下滚动列表时占位符如何更改，并在向上滚动时更改回来。

演示：jsFiddle //注意：第54行是有问题的部分

我最初使用过：

$(".snlf-schedule-list li.dayLabel:visible:first").text();

因为:first selector只能匹配单个元素。

我后来尝试过：

$(".snlf-schedule-list li.dayLabel:visible").filter(":eq(0)")

因为这是相同的事情。

似乎当一个元素不在视图中时，它仍被视为:visible我认为这是我的问题。

我这样做完全错了吗？我的印象是当你滚动这样一个元素时，它应该不再是:visible。阅读documentation后，我了解到这不是正确的选择器。

scrollTop似乎应该如何做到这一点。现在我使用scrollTop向下滚动页面以在不在视图中时禁用动画但我不清楚如何使用滚动条对ul进行此操作。

我试过了：

var _first = $('li.dayLabel:first'); // next element to scroll out of view?
if( $(this).scrollTop() > (_first.offset().top+_first.height())) {
    // Out of view
    console.log("out");
} else {
    // in view
    console.log("in");
}

更新演示：jsFiddle

但它似乎是多余的，因为它已经在计算第一个元素所以我不确定如何获得正确的元素（下一个要滚动出视图的那个元素。）然后我当它们向后滚动时需要它才能工作......

非常感谢对此的任何见解。希望它简单易行，我只是完全复杂化或遗漏。

谢谢，杰里米

Answer 1

我案例的解决方案是：

// Set placeholder text on scroll
var _scrollCagePositionTop = $(".snlf-schedule-list").offset().top;
var _first = $('li.dayLabel:first'); // first dayLabel element
$(".snlf-schedule-list").scroll(function(){
    var _lastOffText = $(_first).text();
    $("li.dayLabel").each(function() {
        if ($(this).offset().top < _scrollCagePositionTop) {
            _lastOffText = $(this).text();
        }
    });
    $("#schedule-placeholder").text(_lastOffText);
});

我所做的是设置滚动条顶部的已知位置（_scrollCagePositionTop）

当用户滚动时，我设置了一个变量_lastOffText，该变量在滚出视图时跟踪最后一个项目文本内容（顶点比顶点持有者少）。然后我将此值设置为占位符。

当用户向上或向下滚动时，此方法允许我在占位符中包含正确的文本。

要解决当用户滚动到顶部时空占位符问题，我只需将默认值_lastOffText设置为第一个标签的文本（$(_first).text()）

希望其他人觉得这很有用。

以下是工作演示：jsFiddle Final

jQuery滚动出视图问题

1 个答案: