我想讓導航條在用戶滾動頁面時固定在視窗的頂部，但是它不起作用，我也不知道為什么。如果你能幫忙，這里是我的HTML和CSS代碼:

.container {
  min-height: 300vh;
}
.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<main class="container">
  <nav style="position: sticky; position: -webkit-sticky;">
    <ul align="left">
      <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
      <li><a href="#/about" class="nav-selections">About</a></li>
      <li><a href="#/products" class="nav-selections">Products</a></li>
      <li><a href="#" class="nav-selections">Home</a></li>
    </ul>
  </nav>
</main>

檢查祖先元素是否設(shè)置了溢出(例如溢出:隱藏)；試著切換它。您可能需要檢查比預期更高的DOM樹=)。

這可能會影響您的位置:粘在一個后代元素上。

粘性定位是相對定位和固定定位的混合。該元素被視為相對定位的，直到它越過指定的閾值，此時它被視為固定定位的。 ... 您必須至少使用“頂部”、“右側(cè)”、“底部”或“左側(cè)”之一來指定閾值，以使粘性定位按預期方式運行。否則就和相對定位沒區(qū)別了。 [資料來源:MDN]

所以在你的例子中，你必須使用top屬性來定義它最終應該停留的位置。

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

我也有同樣的問題，我在這里找到了答案。

如果你的元素沒有像預期的那樣粘著，首先要檢查的是應用于容器的規(guī)則。

具體來說，查找元素的任何父元素上設(shè)置的任何溢出屬性。不能在position: sticky元素的父元素上使用:overflow: hidden、overflow: scroll或overflow: auto。

如果您遇到這種情況，并且您的粘帖不起作用，請嘗試將家長設(shè)置為:

display: unset

為我工作

我遇到的一些事情:

當你的粘性元素是一個組件(角度等)

如果“粘性”元素本身是一個帶有自定義元素選擇器的組件，比如一個名為& lt應用程序-菜單欄& gt您需要將以下內(nèi)容添加到組件的css中:

:host { display: block; }     // or use flexbox

或者

app-menu-bar  { display: block; }   // (in the containing component's css)

Safari on iOS in particular seems to require `display:block` even on the root element `app-root` of an angular application or it won't stick.

如果你正在創(chuàng)建一個組件，并在組件中定義css(陰影DOM /封裝樣式)，確保position: sticky應用于“外部”選擇器(例如，devtools中的app-menu-bar應該顯示sticky位置)，而不是組件中的頂級div。使用Angular，這可以通過組件的css中的:host選擇器來實現(xiàn)。

:host
  {
      position: sticky;
      display: block;   // this is the same as shown above
      top: 0;
      background: red;    
  }

其他的

如果sticky元素后面的元素有純色背景，則必須添加以下內(nèi)容以阻止它在下面滑動:

.sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }

如果使用top，你的粘性元素必須在內(nèi)容之前，如果使用bottom，你的粘性元素必須在內(nèi)容之后。

當使用overflow: hidden在你的包裝元素上時會有一些復雜的情況——一般來說，它會殺死里面的粘性元素。這個問題更好解釋

當屏幕鍵盤可見時，移動瀏覽器可能會禁用粘性/固定位置的項目。我不確定確切的規(guī)則(有人知道嗎)，但當鍵盤可見時，你會看到一種“窗口”,你不會很容易地讓東西粘在屏幕的實際可見頂部。

確保你有:

位置:粘性；

而不是

顯示:粘性；

各種可用性問題

如果你的設(shè)計要求把東西貼在移動設(shè)備的屏幕底部，要小心。例如，在iPhone X上，它們顯示一條細線來指示滑動區(qū)域(以返回主頁)，并且該區(qū)域內(nèi)的元素是不可點擊的。因此，如果你在iPhone X上粘貼了什么東西，一定要測試用戶是否可以激活它。如果人們不能點擊一個大的“立即購買”按鈕，它就沒有用。 如果你在臉書上做廣告，網(wǎng)頁會顯示在臉書手機應用程序的“網(wǎng)絡(luò)視圖”控件中。尤其是在顯示視頻時(當你的內(nèi)容只出現(xiàn)在屏幕的下半部分時)，他們通常會把你的頁面放在一個可滾動的視窗中，讓你的粘性元素從頁面的頂部消失，從而完全弄亂了粘性元素。一定要在真實的廣告環(huán)境中進行測試，而不僅僅是在手機瀏覽器甚至是臉書的瀏覽器中進行測試，因為它們的表現(xiàn)可能會有所不同。 這是MarsAndBack和Miftah Mizwar的回答的延續(xù)。

他們的答案是正確的。然而，很難識別問題祖先。

為了使這變得非常簡單，只需在您的瀏覽器控制臺中運行這個jQuery腳本，它就會告訴您每個祖先的溢出屬性的值。

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

在祖先沒有溢出的地方:visible修改它的CSS使它溢出！

此外，如前所述，確保您的sticky元素在CSS中包含以下內(nèi)容:

.your-sticky-element {
    position: sticky;
    top: 0;
}

我不得不使用下面的CSS來讓它工作:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

如果以上不起作用，那么...

遍歷所有祖先，確保這些元素都沒有overflow: hidden。您必須將其更改為溢出:可見

position: sticky可能不起作用的另一個非常常見的情況是，如果它的父級具有display: flex或display: grid。

在這種情況下，粘滯位置正在工作，但你看不到它，因為元素被完全拉伸了。嘗試使用align-self: baseline降低它的高度，你會看到效果。

如果您的父母使用display flex，粘滯位置將不起作用。當我在一個解決方案中讀到這個的時候

由于flex box元素默認為拉伸，所以所有元素的高度相同，不能滾動。

所以如果你用的是display:flex；在父節(jié)點上，你必須將它添加到粘性元素align-self:flex-start；并且還設(shè)置高度為自動高度:自動；

這就是粘性元素類的樣子

.stick-ontop {
  position: -webkit-sticky !important; // for safari
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}

從另一個方向攻擊這個Q。

想象這是一個尋找最近的滾動祖先的游戲。

<!-- sticky not working -->
<h1 style="position: sticky; top:0;">Hello World</h1>

似乎要粘貼的導航條不應該在任何包含其他內(nèi)容的div或section中。沒有一個解決方案對我有效，直到我把導航欄從與另一個頂欄共享的div中取出。我之前用一個通用的div包裝了topbar和navbar。

我知道這似乎已經(jīng)得到了答案，但我遇到了一個具體的案例，我覺得大多數(shù)答案都沒有抓住要點。

溢出:隱藏的答案涵蓋了90%的情況。這或多或少就是“粘性導航”的情況。

但是粘性行為最好在容器的高度范圍內(nèi)使用。想象一下，在你網(wǎng)站的右欄中有一個時事通訊表格，它會隨著頁面向下滾動。 如果你的粘性元素是容器的唯一子元素，那么容器的大小是完全一樣的，沒有滾動的空間。

您的容器需要達到您希望元素在其中滾動的高度。在我的“右列”場景中是左列的高度。 實現(xiàn)這一點的最佳方法是在列上使用display:table-cell。如果你不能，并且像我一樣被float:right卡住了，你將不得不猜測左邊的列的高度或者用Javascript計算它。

我知道已經(jīng)太晚了。但我發(fā)現(xiàn)了一個解決方案，即使你使用溢出或顯示:flex在父元素粘將工作。

步驟:

為要設(shè)置粘性的元素創(chuàng)建一個父元素(確保創(chuàng)建的元素相對于body或全角& amp全高父母)。

將以下樣式添加到父元素中:

{ 位置:絕對； 身高:100vmax }

對于sticky元素，確保添加比頁面中所有元素都高的z-index。

就是這樣！現(xiàn)在它必須工作。問候

1.如果在元素的任何父級上將overflow設(shè)置為hidden、scroll或auto，Position sticky很可能不起作用。

2.如果任何父元素具有設(shè)定的高度，定位粘滯可能無法正常工作。

對我來說并不明顯的有趣時刻:至少在Chrome 70的位置:如果你用DevTools設(shè)置了sticky，它就不會被應用。

我知道這是一個老帖子。但是，如果有人像我一樣，最近才開始擺弄位置:粘性這可能是有用的。

在我的例子中，我使用position: sticky作為一個網(wǎng)格項目。它不工作，問題是一個溢出-x:隱藏在html元素上。一旦我刪除了那個屬性，它就運行得很好。在body元素上隱藏overflow-x:似乎很有效，但不知道為什么。

根據(jù)我的評論:

位置:粘需要一個坐標來告訴粘在哪里

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

這里有兩個答案:

從body標記中移除溢出屬性

設(shè)置高度:100%到身體，以解決溢出的問題-y:自動

最小高度:100%不工作，而不是高度:100%

我相信這篇文章說了很多關(guān)于粘性是如何工作的

CSS位置粘性是如何工作的！ CSS位置粘滯有兩個主要部分，粘滯項& amp粘性容器。

粘性項—是我們用位置:粘性樣式定義的元素。當視口定位時，元素將浮動 匹配位置定義，例如:top: 0px。

粘性容器—是包裝粘性項目的HTML元素。這是粘性項目可以浮動的最大區(qū)域。

當你用position: sticky定義一個元素時 將父元素定義為粘性容器！

z索引也很重要。有時它會起作用，但你只是看不到它。為確保萬無一失，請嘗試將其設(shè)置為一個非常高的數(shù)字。另外，不要總是放top: 0，而是嘗試更高的值，以防它隱藏在某個地方(工具欄下)。

粘性元素的真實行為是:

首先，它暫時是相對的 然后它被固定一段時間 最后，它從視圖中消失了 粘性定位的元素被視為相對定位的，直到它的包含塊在其流根(或它在其中滾動的容器)內(nèi)越過指定的閾值(例如將top設(shè)置為除auto以外的值)，此時它被視為& quot卡住& quot直到遇到其包含塊的對邊。

根據(jù)文檔的正常流程定位元素，然后根據(jù)top、right、bottom和left的值，相對于其最近的滾動祖先和包含塊(最近的塊級祖先)進行偏移，包括與表相關(guān)的元素。偏移不影響任何其他元素的位置。

該值總是創(chuàng)建新的堆疊上下文。請注意，粘性元素& quot棍子& quot它最近的祖先有一個& quot滾動機制& quot(當溢出被隱藏、滾動、自動或覆蓋時創(chuàng)建)，即使該祖先不是最近的實際滾動祖先。

這個例子將幫助您理解:

代碼https://codepen.io/darylljann/pen/PpjwPM

使用這篇博客中的策略(https://www . design cise . com/web/tutorial/how-to-fix-issues-with-CSS-position-sticky-not-working ),我為那些不能控制頁面中所有組件的人提供了一個選擇

我使用Angular，在ngOnInit方法中，我運行這段代碼來將父對象的可見屬性更改為visible

/**
 * position: sticky
 * only works if all parent components are visibile
 */
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
  const hasOverflow = getComputedStyle(parent).overflow;
  if (hasOverflow !== 'visible') {
    parent.style.overflow = 'visible';
    // console.log(hasOverflow, parent);
  }
  parent = parent.parentElement;
}

如果sticky元素的任何父/祖先設(shè)置了以下任何溢出屬性，則position: sticky將不起作用(除非指定溢出容器的高度):

溢出:隱藏 溢出:滾動 溢出:自動 用于檢查具有溢出屬性集的父級的代碼段:

let parent = document.querySelector('.sticky').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

本文中還有其他方法，但這一個對我有用，我使用了一個動畫庫，并在我不知情的情況下讓父元素添加了overflow: hidden屬性，導致sticky無法工作。

報價來源:https://www . design cise . com/web/tutorial/how-to-fix-issues-with-CSS-position-sticky-not-work

在面對這個問題后，我補充一下我的意見:我用flex包裝器在側(cè)邊欄上添加了position sticky。

添加位置:粘滯是不夠的:它需要頂部或底部有一個不同于自動工作的值 位置:粘性；top:0；還不夠，我曾經(jīng)有一個溢出:隱藏在一個父節(jié)點上(更準確地說，是我的側(cè)邊欄的父節(jié)點的父節(jié)點) 位置:粘性；top:0；移除有問題的溢出:hidden還不夠:我的flex容器需要一個align-items: flex-start。這是有意義的，在flex上下文中，一個沒有堆疊在其父元素頂部的flex項目不應該表現(xiàn)為粘性元素。 只是其他所有答案的總結(jié)。

在我的案例中，我遇到了這樣的情況:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

我希望當用戶完成結(jié)帳表單時，摘要網(wǎng)格項是粘性的。因為那些空的網(wǎng)格項(標有。).

解決方案是像這樣刪除那些空項目:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}

如果danday74的修復不起作用，請檢查父元素是否有高度。

我有兩個孩子，一個在左邊，一個在右邊。 我想讓右邊的浮動變得有粘性，但必須添加一個& ltdiv style = " clear:both；"& gt& lt/div & gt；在父對象的末尾，賦予它高度。

我用的是JS解決方案。它可以在Firefox和Chrome上運行。有任何問題，讓我知道。

超文本標記語言

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

鋼性鑄鐵

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

射流研究…

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

這就是讓我犯錯誤的地方...我的粘性div在另一個div內(nèi)部，因此父div需要在粘性div之后添加一些內(nèi)容，以使父div & quot足夠高& quot對于粘性div來說& quot滑過& quot向下滾動時的其他內(nèi)容。

所以在我的例子中，在sticky div之后，我必須添加:

%div{style:"height:600px;"} 
       

(我的應用程序有兩個并排的div，帶有一個& quot高大& quot圖像在左邊，一個簡短的數(shù)據(jù)輸入表單在右邊，我希望數(shù)據(jù)輸入表單在你向下滾動時浮動在圖像旁邊，這樣表單總是在屏幕上。直到我添加了上面的& quot額外內(nèi)容& quot所以粘粘的div有些東西要& quot滑過& quot

我也有同樣的問題。對我來說，問題在于大屏幕上的顯示:“無”和智能手機上的顯示:“首字母”。如果我刪除了顯示css屬性，并添加了不透明度和指針事件，桌面上什么都沒有。

盡管我讀了整篇文章，試了除了廚房水槽以外的所有東西，但這在我的移動設(shè)備上根本無法運行。一點粘性都沒有，那是我唯一需要它工作的地方。我已經(jīng)排除了任何特殊的名稱或覆蓋，這將阻止這一功能的這種scree n寬度。作為測試，清除了我的移動格式化代碼，沒有看到任何變化。在我的筆記本電腦上的Chrome瀏覽器上運行得非常好，而在我的新S10上完全不能運行。