时间戳

首页 > 解决方案 > Bootstrap 3 Affix 上的错误行为

css - Bootstrap 3 Affix 上的错误行为

问题描述

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

即使我切换到谷歌浏览器中的移动面板，一切都可以按需工作。但不包括真正的移动设备。无论如何，我尝试了三款 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)
    }
});

有任何想法吗？谢谢任何答案。

最好的。

标签： csstwitter-bootstrap-3bootstrap-affix

解决方案

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

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

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

推荐阅读