位置:粘不起作用

Question

我有这个HTML代码:

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

.header的高度为150px..navbar的高度为20px.当用户滚动时,我希望.navbar粘在顶部.所以我去了CSS并设置了位置:sticky和top:0.但这没效果.我最初认为firefox不支持position:sticky,但事实并非如此,因为我能够看到它的工作演示.我用Google搜索但没有发现任何帮助.谁知道为什么这不起作用？

Answer 1

对于遇到这种情况的任何其他人来说,由于body元素已overflow-x: hidden;设置,因此粘贴位置对我不起作用.

Answer 2

position: sticky;可能不起作用的两个最常见的罪魁祸首是：

1. 你还没有定义top: 0;, bottom: 0;,left: 0或类似的东西
2. 您的粘性元素的父元素之一将溢出（x 或 y）设置为hidden,scroll或auto。

对我来说这是第一个。

Answer 3

如果您将导航栏移动到标题之外,它可以正常工作.见下文.因此,根据MDN的说法:

元素根据文档的正常流定位,然后相对于其流根偏移并且包含基于顶部,右侧,底部和左侧的值的块.

对于包含块:

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

所以,当我不要误会,导航栏在尽快头内偏移0,因为它是视口(其中,显然,手段,你看不到它了)外的滚动定位.

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}

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

<div class="navbar"></div>

Answer 4

从上面的答案和一些信息进行扩展，以使其与flexbox父级和溢出一起使用，而不是可见（下面的示例假设您使用垂直 - 粘性，顶部或底部设置为特定值，位置设置为粘性）：

1. 最常见的情况是您有一个祖先元素（不仅仅是直接父元素），其溢出属性设置为可见以外的其他内容，因此没有留下任何空间。要快速确定是否是这种情况，您可以在浏览器控制台中运行此脚本（请确保将 .your-sticky-element 类更改为元素的选择器）：

    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) 如果必须保持溢出设置，则必须使父元素的高度高于粘性元素的高度。如果父元素没有高度或粘性元素填满了所有高度，则意味着滚动页面时根本没有地方可以粘住。它不需要明确的高度（垂直），但您可以检查您的粘性元素是否在其之后有额外的空间。

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

3. 如果你的粘性元素的父元素是一个 flexbox（align-items 的默认值是 normal），并且粘性元素本身没有正确的align-self设置，则在滚动时粘性元素将没有剩余空间来保持（例如，如果它是 align-self:stretch 或 auto [默认值]）。这是因为子元素被拉伸以填充父元素的高度。

   解决方案：

   在这种情况下，为粘性元素设置align-self: flex-start可以解决这个问题，因为在元素中会站在开始处，在它自己之后留下额外的空间。

指南：有和没有 flexbox 都有更复杂的情况，但一般的经验法则是你的粘性元素需要在父元素中留出空间才能在滚动时保持粘性。

Answer 5

.navbar不知何故，您的代码仅在元素不在另一个容器（如标题）内时才有效。我把它移了出来，然后就可以正常工作了。我为此创建了一个 codepen 片段，请查看

<header>
    <div class="logo">Logo</div>
    <div class="description"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis.</div></div>
</header>
<div class="navbar">
    <ul>
        <li><a href="#">navitem1</a></li>
        <li><a href="#">navitem2</a></li>
        <li><a href="#">navitem3</a></li>
        <li><a href="#">navitem4</a></li>
    </ul>
</div>

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

• 工作演示（chrome、firefox）https://codepen.io/simvidas/pen/JbdJRZ
• Caniuse 参考：http://caniuse.com/#search=sticky
• MDN 上的置顶文章，包括最新的浏览器支持表https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

但好消息即将到来。我认为下次将会有更好的浏览器支持。