javascript - 粘性导航栏出现奇怪的 JS 错误

标签 javascript html css

<分区>

所以我有一个网站,你可以看到here .我的粘性导航栏有问题,当我滚动到页面底部时它会闪烁。

当我的JS是这样的时候,它工作不闪烁:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>

但导航栏会剧烈跳动。然而,当导航栏是这样的时候,它不会跳来跳去,而是会闪烁......

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: $('#nav').height()
        });
    });
</script>

显然,我想要一个不闪烁或跳跃的导航栏。我在 FireFox、Chrome 和 Safari 上检查了我的代码。请帮助我!

最佳答案

快速回答:只需将您应用于#nav.affix 的相同 css 属性分配给#nav.affix-bottom,即在 homegrown.css 更改中

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

#nav.affix, #nav.affix-bottom {
    position: fixed;
    top: 0;
    width: 100%
}

说明:大部分说明在this中邮政。但是根据我的测试,我注意到当你在页面末尾附近滚动时......闪烁正在发生 b/c .affix-bottom 被突发地应用到你的 #nav div.. 所以我简单地给了 .affix-bottom 相同的属性 .affix.. 所以 div 不会发生突然的变化.. 希望这个有帮助!

关于javascript - 粘性导航栏出现奇怪的 JS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14846259/

相关文章:

javascript - Firestore没有执行操作的权限

html - 相对于输入字段的小帮助文本

javascript - 当单击邮件图标时,将使用此电子邮件 ID 打开邮件

javascript - 如何在 Jquery 或 Javascript 中使用 IN 运算符

javascript - VueJS 2 + typescript : computed value does not detect property defined by data

html - 为什么我不能将新幻灯片添加到我的纯 css 幻灯片中?

javascript - 刷新问题?脚本在每次刷新时继续运行

javascript - 如何删除使用 css last-child 添加的样式

css - Div 发生在另一个 div 之上?

javascript - 主菜单动态居中下拉