将焦点从固定页眉或固定页脚下移出答案

【问题标题】：Move input with focus out from under fixed header or fixed footer将焦点从固定页眉或固定页脚下移出
【发布时间】：2014-02-03 22:57:20
【问题描述】：

有没有办法设置填充或边距，或者调用 javascript 将输入元素从固定导航栏下方移出并进入视图？

我正在使用 bootstrap 3.1 并创建了一个 bootply 来展示我正在努力解决的问题。

问题是当用户使用“Tab”键逐步浏览输入元素并且输入元素落在固定顶部导航栏或固定底部导航栏之后。

将其隐藏在顶部导航栏下并没有底部导航栏那么糟糕，因为控制流从顶部开始。如果用户用 tab 键备份表单，这就是控制流的问题。

这里是 bootply 的 URL：http://bootply.com/110608#

谢谢

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我也有同样的问题，但我不希望每个输入都有动画，这里是基于 Skelly 回答的替代方案：

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

【讨论】：

+1 此解决方案适用于固定页眉，但不适用于页脚。我用类似的方法发布了一个答案，但是对于重叠的固定页脚。

【解决方案2】：

您可以使用 jQuery animate 来滚动正文，因为每个输入都是聚焦的..

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

演示：http://bootply.com/110643

【讨论】：

这看起来很整洁，但我想它总是会滚动元素，对吧？即使它已经在视野中......

【解决方案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);
    }
});

【讨论】：

【解决方案4】：

如果你的导航栏有固定的高度，你可以只用 CSS 来做到这一点。

确保 html 和 body 的 height 和 max-height 设置为 100%。
从导航栏中删除 position: fixed。
将内容放在与导航栏相邻的自己的<div> 中，并使用calc 函数将其最大高度减去导航栏总高度的100%。
还将overflow-y: scroll 分配给此内容div。

使用这种布局，元素完全不会重叠，因此焦点问题消失了。

此处示例：https://codepen.io/doodleygroover/pen/wvweKXv

此解决方案需要对具有响应高度的导航栏进行一些调整。在这种情况下，您需要添加一些 JS 来监听窗口大小调整并更新内容 div 的 max-height 属性。

【讨论】：

谢谢！！这对我有用！