Moving input with focus from a fixed header or fixed footer

Question

Is there a way to set margins or margins, or call javascript to move the input element with focus from under a fixed navigation bar and into the field of view?

I use Boosttrap 3.1 and created bootply to show what I'm struggling with.

The problem is that the user uses the Tab key to navigate through the input elements, and the input element lags either from the fixed top navigation bar or from the fixed lower navigation bar.

Hiding it under the top navigation bar is not as bad as with the bottom navigation bar, since the control flow starts from the top. This is a problem with the control flow if the user backs up the form.

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

thanks

Answer 1

You can use jQuery animation to scroll the body while focusing each input.

$('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 2

I had the same problem too, but I don't need animation for each 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 3

, , , . ( ).

$('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);
    }
});

Answer 4

CSS, .

• , HTML & & 100%.
• position: fixed .
• <div> 100% calc.
• overflow-y: scroll div.

, .

: https://codepen.io/doodleygroover/pen/wvweKXv

This solution needs a little tweaking for responsive height navigation bars. In this case, you need to add a little JS that listens for window resizing and updates the max-heightcontent property div.