Question

我想基于Bootstrap 3 Affix功能添加到我的站点，以获取底部导航链接。这些链接固定在底部，并为页脚添加了偏移量。但是，当我滚动到页脚时，我看到导航做了一些小的“跳转”。

即使我在Google Chrome浏览器中切换到移动面板，也可以根据需要进行所有工作。但不包括真正的移动设备。无论如何，我都尝试了三种Android设备。

我在电话屏幕上添加了一个短视频链接，以进行澄清：https://imgur.com/a/lcBASRD。

请查看屏幕底部。

CSS：

#nav_affix {
    left: 50%;
    margin-left: -70px;
    width: 140px;
    z-index: 99999;
}
.affix {
    position: fixed;
    bottom: 0;
}

#nav_affix.affix-bottom {
    position: absolute;
}
#nav_affix div.next {
    float: right;
}
#nav_affix div.prev {
    float: left;
}

#nav_affix div.next,
#nav_affix div.prev {
    width: 60px;
    height: 60px;
    border-radius: 10px;
}

JS：

$('#nav_affix').affix({
    offset: {
        bottom: $('.footer_wrap').outerHeight(true)
    }
});

有什么想法吗？谢谢答案。

最好。

Answer 1

您应该将页脚放在与页脚高度相同的包装纸中。因此，当页脚放置其原始位置时，它不会跳转。

我已经动态地做到了这一点，但是静态高度也可以解决问题。

$('#nav_affix').on('affix.bs.affix', function () {
    $('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});

Bootstrap 3词缀上的错误行为

1 个答案: