“位置：粘性；” 无法正常工作的CSS和HTML

滚动到导航栏后，我想使其停留在顶部，但是它不起作用，我也不知道为什么。如果可以的话请帮我，这是我的HTML和CSS代码：

.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 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>

粘性定位是相对定位和固定定位的混合。将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。
...
您必须指定的至少一个阈值top，right，bottom，或者left为粘稠定位像预期的那样。否则，将无法与相对位置区分开。[资料来源：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>

检查祖先元素是否设置了溢出（例如 overflow:hidden）；尝试切换。您可能必须将DOM树提高到比您期望的高=）。

这可能会影响您position:sticky的后代元素。

我有同样的问题，我在这里找到了答案。

如果您的元素不符合预期，则首先要检查的规则是应用于容器的规则。

具体来说，寻找在父级上设置的任何溢出属性。不能使用：overflow: hidden，overflow: scroll或overflow: auto在的父position: sticky元素。

我碰到的几件事：

当您的粘性元素是组件（角度等）时

• 如果“ sticky”元素本身是带有自定义元素选择器的组件，例如名为的角度组件<app-menu-bar>，则需要在组件的css中添加以下内容：

  :host { display: block; }   

  要么

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

  尤其是iOS上的Safari似乎display:block甚至需要在app-root角度应用程序的根元素上使用，否则它不会卡住。

• 如果要创建一个组件，定义组件内部的CSS（影子DOM /封装样式），确保position: sticky被应用到“外”选择（例如，app-menu-bar在devtools应显示粘的位置），而不是一个顶级div 中组件。使用Angular，可以通过:host组件的CSS中的选择器来实现。

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

其他

• 如果粘滞元素后面的元素具有固定背景，则必须添加以下内容以阻止其在下面滑动：

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

• 如果使用top，您的粘滞元素必须位于第一个位置（在内容之前），如果使用则必须在其之后bottom。

• 在overflow: hidden包装元素上使用会带来一些麻烦，通常会杀死里面的粘性元素。更好地解释了这个问题

• 当屏幕键盘可见时，移动浏览器可能会禁用粘性/固定位置的项目。我不确定确切的规则（任何人都知道），但是当键盘可见时，您正在查看进入窗口的某种“窗口”，并且您将无法轻易将东西固定在窗口上屏幕的实际可见顶部。

• 确保您具有：

  position: sticky;

  并不是

  display: sticky;

其他可用性问题

• 如果您的设计要求将东西粘在移动设备的屏幕底部，请务必谨慎。例如，在iPhone X上，它们显示一条细线以指示滑动区域（以返回首页）-并且该区域内的元素不可单击。因此，如果您粘贴某些东西，请务必在iPhone X上测试用户可以激活它。如果人们无法点击“立即购买”按钮，那就不好了！
• 如果您要在Facebook上做广告，则该网页将显示在Facebook的移动应用程序的“网络视图”控件中。特别是在显示视频时（您的内容仅在屏幕的下半部分开始）-它们通常将页面放在可滚动的视口中，从而完全弄乱了粘性元素，实际上使粘性元素从页面顶部消失了。确保在实际广告的环境中进行测试，而不仅仅是在手机的浏览器甚至Facebook的浏览器中进行测试，因为两者的行为可能会有所不同。

这是MarsAndBack和Miftah Mizwar的答案的延续。

他们的答案是正确的。但是，很难确定问题祖先。

要使其变得非常简单，只需在浏览器控制台中运行此jQuery脚本，它将告诉您每个祖先上的overflow属性的值。

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

祖先没有overflow: visible更改其CSS的地方！

另外，如其他地方所述，请确保您的粘滞元素在CSS中具有以下内容：

.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。您必须将其更改为overflow: visible

如果遇到这种情况而粘滞不起作用-尝试将父项设置为：

display: unset

为我工作

有趣的时刻对我来说并不明显：position: sticky如果您使用DevTools进行设置，至少在Chrome 70 中不会应用。

似乎要粘贴的导航栏不应位于具有其他内容的任何div或部分中。在我将导航栏从与另一个topbar共享的div中取出时，所有解决方案都无法为我工作。

从我的评论：

position:sticky 需要协调才能联系到哪里

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>

除FF和Chrome浏览器外，还有用于其他浏览器的polyfill。这是一个实验性规则，可以通过浏览器随时执行或不执行。Chrome在几年前添加了它，然后又放下了它，似乎又回来了……但是要持续多久？

最接近的将是position：relative + coordonates，滚动时一旦到达粘滞点，就会更新，如果您想将其转换为javascript脚本

我知道这似乎已经得到了回答，但是我遇到了一个具体情况，我觉得大多数答案都没说清楚。

在overflow:hidden回答覆盖90％的病例。这或多或少是“粘性导航”的场景。

但是最好在容器的高度内使用粘性行为。考虑一下您网站右栏中的新闻通讯表单，该表单随页面向下滚动。如果您的粘性元素是容器的唯一子元素，则容器的大小完全相同，并且没有滚动空间。

您的容器必须是您希望元素在其中滚动的高度。在我的“右列”方案中，哪一个是左列的高度。实现此目的的最佳方法是display:table-cell在列上使用。如果不能，并且float:right像我以前那样受困，则必须猜测使用Javascript计算它的左列高度。

我知道这是旧帖子。但是，如果有像我这样的人最近才开始摆弄位置：粘性，这可能会很有用。

就我而言，我使用的是位置：粘性作为网格项目。它不起作用，问题是溢出-x：隐藏在html元素上。我删除该属性后，它就可以正常工作。在body元素上隐藏overflow-x：似乎行得通，还不知道为什么。

这里有两个答案：

1. overflow从body标签中删除属性

2. 设置height: 100%为body解决问题overflow-y: auto

min-height: 100% 不起作用而不是 height: 100%

我相信这篇文章讲了很多关于如何sticky运作的内容

CSS Position Sticky如何真正发挥作用！CSS位置粘性有两个主要部分，粘性项目和粘性容器。

粘性项目  -是我们使用以下位置定义的元素：粘性样式。当视口位置与位置定义匹配时，该元素将浮动，例如：top: 0px。

粘性容器 —是包装粘性项目的HTML元素。这是粘性项目可以漂浮的最大区域。

当您定义具有位置：粘性的元素时，您会自动将父元素定义为粘性容器！

粘性元素的实际行为是：

• 首先它是相对的
• 然后固定一会儿
• 最终，它从视野中消失了

粘滞放置的元素被视为相对放置，直到其包含的块在其流根（或在其中滚动的容器）内超过指定的阈值（例如，将顶部设置为auto以外的值），此时将其视为“卡住” ”，直到遇到其包含块的相对边缘。

根据文档的正常流程放置元素，然后根据top，right，bottom的值相对于其最近的滚动祖先和包含表相关元素的包含块（最近的块级祖先）偏移。走了。该偏移量不会影响任何其他元素的位置。

此值始终创建一个新的堆栈上下文。请注意，粘性元素“粘贴”到其最接近的祖先，该祖先具有“​​滚动机制”（在隐藏，滚动，自动或覆盖溢出时创建），即使该祖先不是最近的实际滚动祖先。

该示例将帮助您理解：

code https://codepen.io/darylljann/pen/PpjwPM

如果danday74的修复不起作用，请检查父元素是否具有高度。

就我而言，我有两个孩子，一个漂浮在左边，另一个漂浮在右边。我希望右浮动对象变得粘稠，但必须<div style="clear: both;"></div>在父级末尾添加一个，以增加高度。

我使用了JS解决方案。它适用于Firefox和Chrome。有任何问题，请通知我。

html

<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>

的CSS

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;
    }
}

js

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()
    }
}

z-index也很重要 有时它会起作用，但您只会看不到它。请确保将其设置为很高的数字。另外，不要总是放，top: 0但要尝试更高的东西以防隐藏在某个地方（在工具栏下）。

这就是让我绊倒的原因...我的粘性div位于另一个div内，以便父div在粘性div之后需要一些其他内容，以使父div足够“高”，以使粘性div可以“滑过”其他内容，例如您向下滚动。

因此，就我而言，在粘性div之后，我必须添加：

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

（我的应用程序有两个并排的div，左侧有一个“高”图像，右侧有一个简短的数据输入表单，我希望当您向下滚动时，数据输入表单会浮在图像旁边，因此表单始终显示在屏幕上。直到我添加了上述“额外内容”后，表单才起作用，因此粘性div可以“滑移”

这是真实的，overflow需要被拆除或设置为initial使position: sticky子元素的作品。我在Angular应用程序中使用了Material Design，发现某些 Material组件更改了该overflow值。我的情况的解决方法是

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}