jQuery - 滚动命中某个元素时自动输入焦点

Question

我正在使用名为 Waypoints 的 jQuery 插件 使用滚动动作。

我想要实现的是将焦点设置在视口中某个部分的第一个输入元素上，并在向下滚动时将焦点移动到下一个相应部分的输入。而且，当滚动回上方的第一部分时，它应该将焦点设置回第一部分的输入。

以下是我使用上述插件的实际工作设置。 不幸的是，我无法在我的JS Fiddle 中真正启动并运行该插件。

此代码块的工作原理是在页面加载时设置焦点并在向下滚动时将焦点更改为目标输入 但回滚到顶部不会重新设置焦点。

(function($) {

var firstInput = $('section').find('input[type=text]').filter(':visible:first');

if (firstInput != null) {
    firstInput.focus();
}

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
});

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
}, {
    offset: function () {
        return -$(this).height();
    }
});

});

这是我的JS Fiddle 没有插件部分。

只要有人能解释他们应该如何在普通的 jQuery 中完成 如果不熟悉这个插件。

Answer 1

jQuery Waypoints 使用起来非常简单。我没有尝试过你的代码，但我已经完成了：

$('input:first').focus();

$('section').waypoint(function() {
    $(this).find('input:first').focus();
});

请看这个fiddle。

但是，在向下滚动时使用鼠标滚轮，滚动有时会在中间部分跳回。这可能是浏览器对输入焦点的反应。我没有浏览整个文档，但没有输入焦点的示例。

---

如果您只想完成这个简单的任务，我建议您放弃该插件。我可以向您展示如何使用 jQuery 完成此操作。

您可以使用 jQuery 的 scroll() 函数来处理滚动。您需要在滚动事件中获取scrollTop()，然后将其与<input> 的顶部offset() 进行比较。

$(window).scroll(function(){
    var st = $(this).scrollTop();
    $('input[type=text]').each(function(){
        var offset = $(this).offset();

        if(st >= offset.top -20 && st < offset.top + $(this).height()){
            $(this).focus();  
        } 
    });  
});

这里是fiddle。