為什么我的粘性導航欄不能在移動設備上運行？

Question

我正在開發我的第一個投資組合網站。 我創建了這個導航欄，它似乎一直有效，直到我最終使用 chrome 開發工具對其進行了測試。 我嘗試只隔離導航欄，它似乎有同樣的問題。 當我在移動設備上向下滾動時，它不會粘在頂部，但當我向上滾動時，它會粘在那里。 超級令人沮喪，但我會堅持下去。

這里是碼筆https://codepen.io/kylemt03/pen/WNKEZjg

/* Nav */

nav {
    display:flex;
    justify-content:space-around;
    align-items:center;
    min-height:8vh;
    background-color:var(--blue);
    position:sticky;
    top:0;
    z-index:1;
    box-shadow:1px 1px 2px rgb(0 0 0 / 50%);
    width:100%;
}

.logo {
    color:var(--white);
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size:3em;
    text-shadow:gray 2px 2px 4px;
}

.logo a {
    color:var(--white);
}

.nav-links {
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    width: 45%;
    letter-spacing:2px;
    font-size:1em;
    list-style: none;
    align-items: center;
}

.nav-links li {
    display:inline-block;
}

.fancy-links {
    color:var(--white);
    position: relative;
}

.nav-links a {
    color:var(--white);
}

.fancy-links::after {
    content:"";
    position: absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin: right;
    transition:all 0.4s ease-in-out;
}

.fancy-links:hover::after {
    transform:scaleX(1);
    transform-origin: left;
}

.fa-brands {
    font-size:1.25em;
}

/* Burger Menu */

.burger {
    display:none;
}

.burger div {
    width:25px;
    height:5px;
    background-color:white;
    margin:5px;
}

請查看所有代碼的codepen。 這里太多了。

任何幫助表示贊賞！

我試過刪除一些位，現在將其隔離到導航欄。 結果似乎是一樣的。 我專門嘗試在導航鏈接中刪除我的幻燈片，但也沒有改變行為

如果帖子看起來很糟糕，這是我第一次發帖，這就是原因！

Answer 1

我無法在我這邊重現這個問題，但我有一個猜測：

在你的 codepen 中有這一行： overflow-x: clip, hidden; ，這是無效的 CSS 但您的移動瀏覽器可能會以某種允許overflow-x: hidden; 申請，這將阻止position: sticky按您預期的方式工作。

刪除該行，看看是否有所作為。