Question

有没有办法设置填充或边距，或者调用javascript来移动带有焦点的输入元素，从固定的导航栏下移动到视图中？

我正在使用bootstrap 3.1并创建了一个bootply来显示我正在努力的内容。

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

将其隐藏在顶部导航栏下并不像底部导航栏那么糟糕，因为控制流从顶部开始。如果用户选中备份表单，则控制流会出现问题。

以下是bootply的网址：http://bootply.com/110608#

由于

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

Answer 2

您可以使用jQuery动画来滚动主体，因为每个输入都是聚焦的。

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

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和body的高度和最大高度设置为100％。
从导航栏中删除position: fixed。
将内容放入导航栏旁边的自己的<div>中，并使用calc函数将其最大高度减去导航栏的总高度。100％ >
还将overflow-y: scroll赋予该内容div。

采用这种布局，元素根本不会重叠，因此焦点问题就消失了。

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

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

将输入焦点从固定标题或固定页脚下移出

4 个答案: