I have been utilizing a jQuery plugin called Waypoints to handle scroll actions.
My goal is to focus on the first input element of a section that is currently visible on the screen and then shift the focus to the input of the next respective sections as the user scrolls down. If the user scrolls back up to the first section, the focus should return to the input of that section.
Below is the code snippet from my working setup using the mentioned plugin. I have been unable to replicate the functionality in my JS Fiddle.
While this code successfully sets focus on page load and shifts focus to the targeted input when scrolling down, it does not return focus to the top section when scrolling back up.
(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();
}
});
});
Here is the link to my JS Fiddle without the plugin implementation.
If anyone can provide guidance on how to achieve this using standard jQuery methods rather than relying on this specific plugin, it would be greatly appreciated.