Css 位置：sticky不工作

我有以下HTML代码：

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

描述

---

.收割台的高度为150像素。导航栏的高度为20px。当用户滚动时，我希望.navbar粘贴在顶部。所以我转到CSS并设置位置：sticky和top:0。但这不起作用。我最初认为firefox不支持position:sticky，但事实并非如此，因为我看到了它的一个工作演示。我在谷歌上搜索了一下，但没有发现任何有用的东西。有人知道这为什么不起作用吗？

您的HTML代码就是这样

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

---

希望这会有所帮助

如果您将导航栏移到标题外，它工作正常。见下文。因此，根据：

根据文档的正常流定位元素，然后根据top、right、bottom和left的值相对于其流根和包含块进行偏移

对于包含块：

包含块是元素相对定位的祖先

因此，如果我没有误解的话，导航栏在视口外滚动时就会定位在标题内的偏移量0处（很明显，这意味着你再也看不到它了）

.navbar{
背景：火红；
宽度：100%；
高度：50px；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
}
.标题{
高度：150像素；
背景：灰色；
}
身体{
高度：800px；
位置：相对位置；
}

描述

不知何故，只有当

.navbar

元素不在另一个容器（如标题）中时，代码才会工作。我把它搬走了，然后它就可以正常工作了

标志
我的同僚们都是精英。Quo，veritatis。

现在

position:sticky

得到了很好的支持，正如您在canIuse上看到的那样。当然IE目前没有支持，但是新的Edge版本将对此提供全面支持！我发现了一些关于这个主题的有趣文章：

---

• 工作演示（chrome，firefox对于任何遇到这种情况的人来说，由于

  body

  元素设置了

  overflow-x:hidden；

  。
  在标题中的nav之后添加更多内容会提供粘性行为，但仅在一瞬间-如果用户向下滚动过多，nav将随标题一起消失，si因为它不能跳出标题下边框
  因此，使用纯CSS的唯一解决方案是将nav放在部分可见的元素中，即使用户滚动到页面底部（直接放在主体内部，或者放在跨越页面底部或至少到页脚的某种容器中）
  如果这个解决方案不可行，另一种方法是使用JavaScript。在转换到CSS之前，我使用了以下代码（很久以前在某个地方发现了类似的jQuery解决方案，不记得在哪里，所以这归功于匿名作者；可以很容易地从中获得Vanilla JS）：

  ---

  为什么

  位置：sticky；

  可能不起作用，最常见的两个罪魁祸首是：

• 您尚未定义

  顶部：0；

  ，

  底部：0；

  ，

  左侧：0

  或类似的内容
• 粘性元素的父元素之一已将溢出（x或y）设置为

  隐藏

  ，

  滚动

  或

  自动

---

对我来说，它是第一个。
从上面的答案和一些信息展开，使其能够与flexbox父项和溢出而不是可见的（以下示例假设您使用垂直-粘性，将顶部或底部设置为特定值，并将位置设置为粘性）：
• 最常见的情况是，您有一个祖先元素（不仅仅是直接父元素），其overflow属性设置为visible之外的其他属性，因此没有空间可供保留。 要快速查明是否存在这种情况，可以在浏览器控制台中运行此脚本（请确保将.sticky元素类更改为元素的选择器）：

   var stickyElement = document.querySelector('.your-sticky-element');
   var parent = stickyElement.parentElement;
   while (parent) {
       var hasOverflow = getComputedStyle(parent).overflow;
       if(hasOverflow != 'visible') {
           console.log(hasOverflow, parent);
       }
       parent = parent.parentElement;
   } 
  

  解决方案：

   var stickyElement = document.querySelector('.your-sticky-element');
   var parent = stickyElement.parentElement;
   while (parent) {
       var hasOverflow = getComputedStyle(parent).overflow;
       if(hasOverflow != 'visible') {
           console.log(hasOverflow, parent);
       }
       parent = parent.parentElement;
   } 
  

  a） 如果您发现有溢出集，并且可以删除它，这应该可以解决它
  b） 如果必须保持溢出设置，则必须使父元素的高度高于粘滞元素的高度。如果父元素没有高度或粘滞元素填满了所有高度，则意味着在滚动页面时，根本没有可以粘滞的位置。不需要显式的高度（垂直），但您可以检查粘滞元素在其自身之后是否还有额外的空间

• 父元素不高于粘滞元素以留出额外空间。这种特殊情况可能是由不同情况引起的，但解决方法与上面相同，请参见1.b

• 如果粘滞元素的父元素是flexbox（align items的默认值为normal），并且粘滞元素本身没有正确的align self设置，则滚动时粘滞元素将没有空间可容纳（例如，如果是align self:stretch或auto[默认值]）。这是因为子元素被拉伸以填充父元素的高度
  解决方案：

   var stickyElement = document.querySelector('.your-sticky-element');
   var parent = stickyElement.parentElement;
   while (parent) {
       var hasOverflow = getComputedStyle(parent).overflow;
       if(hasOverflow != 'visible') {
           console.log(hasOverflow, parent);
       }
       parent = parent.parentElement;
   } 
  

  在这种情况下，为粘滞元素设置的align self:flex start可以解决问题，因为该元素将位于起始位置，在其自身之后留下额外的空间

---

指南：使用FlexBox和不使用FlexBox的情况都要复杂得多，但一般的经验法则是，当滚动时，粘性元素需要父元素中的空间来保持粘性。
遇到了一些不明显的水平粘性行为：如果宽度为100%，则粘性不起作用。宽度应为less、 然后是容器大小 var stickyElement = document.querySelector('.your-sticky-element'); var parent = stickyElement.parentElement; while (parent) { var hasOverflow = getComputedStyle(parent).overflow; if(hasOverflow != 'visible') { console.log(hasOverflow, parent); } parent = parent.parentElement; }