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

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

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);
    }
});

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);
    }
});