Move input with focus out from under fixed header or fixed footer

Question

Is there a way to set padding or margin, or call javascript to move the input element, with focus, out from under a fixed navbar and into view?

I am using bootstrap 3.1 and have created a bootply to show what I am struggling with.

The issue is when the user uses the "Tab" key to step through the input elements and an input element falls behind either the fixed top navbar or the fixed bottom navbar.

Having it become hidden under the top navbar is not as bad as the bottom navbar since control flow starts from the top. It is a problem with control flow if the user tabs back up the form.

Here is the URL for the bootply: http://bootply.com/110608#

Thanks

Answer 1

I too had the same issue, but I didn't want the animation for every input, here is an alternative based on Skelly's answer:

$('input').focus(function () {
    var element = $(this);
    if (element.offset().top - $(window).scrollTop() < 80)
    {
         $('html, body').animate({
            scrollTop: element.offset().top - 80 /* 80 is height of navbar + input label */
        }, 500);
    }
});

Answer 2

You could use jQuery animate to scroll the body as each input is focused..

$('input').focus(function() {
    var ele = $(this);
    $('html, body').animate({
        scrollTop: ele.offset().top - 80 /* 80 is height of navbar + input label */
    }, 800);
});

Demo: http://bootply.com/110643

Answer 3

I had a similar issue with my footer overlapping my form elements and I didn't want a scroll action unless the element was covered by the footer. Here is how I did the bottom-up (footer) approach.

$('input, button, a').focus(function () {
    var footerHeight = 200; //footerHeight = footer height + element height + buffer
    var element = $(this);
    if (element.offset().top - ($(window).scrollTop()) > ($(window).height() - footerHeight)) {
        $('html, body').animate({
            scrollTop: element.offset().top - ($(window).height() - footerHeight)
        }, 500);
    }
});