jQuery - автоматический ввод фокуса при прокрутке по определенному элементу

Question

Я использую плагин jQuery под названием Waypoints для работы со свитком.

То, что я хочу достичь, - это установка фокуса на первый элемент ввода раздела, который находится в окне просмотра, и перемещение фокуса на вход следующих соответствующих секций при прокрутке вниз. И при прокрутке назад к первому разделу выше, он должен установить фокус обратно на вход первого раздела.

Ниже приведено то, что у меня есть на моей реальной рабочей установке, использующей вышеупомянутый плагин. К сожалению, я не могу получить плагин в моем 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>'s top 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.