固定元素在移动设备上随顶部导航栏移动答案

【问题标题】：Fixed elements move with top navigation bar on mobile固定元素在移动设备上随顶部导航栏移动
【发布时间】：2020-02-26 08:38:24
【问题描述】：

当浏览器导航栏显示时，我的网站移动导航栏滚动到可查看区域之外时遇到问题。我已经尝试了一些方法来修复它，但我似乎无法让它正常工作。

向下滚动之前：

向下滚动后：

我与导航栏相关的 SCSS 摘录：

nav {
    display: flex;
    flex-direction: column;
    float: left;
    background-color: #3a3e4b;
    height: 100%;
    width: 100px;
    position: fixed;
}

// body also switches flex direction to put the nav bar at the bottom.
@media only screen and (max-width: 720px) {
    nav {
        flex-direction: row;
        height: 70px;
        width: 100%;
    }
}

此处提供完整的 SCSS：https://github.com/CorruptComputer/CorruptComputer.GitHub.io/blob/master/assets/css/main.scss

我查看了这些，但似乎都没有帮助：

【问题讨论】：

在导航样式中添加 'bottom:0'。

标签： html css sass

【解决方案1】：

这是与 google chrome 相关的问题，您必须找到解决方法。

当 chrome 移动顶部地址栏出现时，它会将页面向下推，因此您会遇到此问题。通过滚动页面，顶部地址栏将消失。

试试这个 Javascript 代码，您可以将它用作一个函数，也可以仅用作 Javascript 文件顶部的一行。

scrollOnLoad();

function scrollOnLoad() {
   window.scrollBy(0, 1);
}

或者

  window.scrollBy(0, 1);

【讨论】：