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的{{1}}元素，因此粘贴位置无效。

Answer 2

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

根据文档的正常流程定位元素，然后根据top，right的值，偏移相对到其流根，包含块，底部和左边。

对于包含块：

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

所以，当我没有误解时，只要它在视口外滚动，导航栏就会定位在标题内的偏移0处（显然，这意味着，你再也看不到了）。

＆＃13;

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}

＆＃13;

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

＆＃13;

Answer 3

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

您尚未定义top: 0;，bottom: 0;，left: 0或类似的内容
粘性元素的父级之一的溢出（x或y）设置为hidden，scroll或auto。

对我来说是第一个。

Answer 4

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

最常见的情况是您有一个祖先元素（不仅仅是直接父元素），其溢出属性设置为可见以外的其他内容，因此没有留下任何空间。要快速确定是否是这种情况，您可以在浏览器控制台中运行此脚本（请确保将 .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) 如果必须保留溢出设置，则必须使父元素的高度高于粘性元素的高度。如果父元素没有高度或粘性元素填满了所有高度，则意味着在滚动页面时根本没有地方可以粘贴。它不需要明确的高度（垂直），但您可以检查您的粘性元素是否在其自身之后有额外的空间。
Parent 不高于粘性元素以留出额外空间。这种特殊情况可能是由不同的情况引起的，但解决方法与上述相同，请参见 1.b
如果你的粘性元素的父元素是一个 flexbox（align-items 的默认值是 normal），并且粘性元素本身没有一个正确的 align-self 设置，将会有滚动时没有留下粘性元素的空间（例如，如果它是 align-self:stretch 或 auto [默认值]）。这是因为子元素被拉伸以填充父元素的高度。

解决方案：

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

指南：在使用 flexbox 和不使用 flexbox 的情况下，情况要复杂得多，但一般的经验法则是，您的粘性元素需要父级中的空间才能在滚动时保持粘性。< /p>

Answer 5

不知何故，只有当.navbar元素不在标题之类的另一个容器中时，您的代码才有效。我把它移出来然后它工作正常。 I created a codepen snippet for that, check it out

<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/simevidas/pen/JbdJRZ
Caniuse参考：http://caniuse.com/#search=sticky
MDN上的粘性文章，包括最新的浏览器支持表https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

但是有一些好消息即将来临。我认为下次有更好的浏览器支持。

Answer 6

您的HTML代码

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

并编写导航栏的CSS类

.header {
height: 150px;
background-color: #d1d1d1;
}

.navbar {
  background: #999;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  color: #FFF;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

希望这会有所帮助

Answer 7

在 header 内的 nav 之后添加更多内容提供了粘滞行为，但只是一时-如果用户向下滚动太多，则 nav 将会与 header 一起消失，因为它无法跳出 header 的底部边框。

因此，使用纯CSS的唯一解决方案是将 nav 放在即使用户滚动到页面底部（直接在 body 内部）部分可见的元素内或某种跨越到页面底部或至少跨越 footer 的容器内。

如果该解决方案不可行，则另一种方法是使用JavaScript。在过渡到CSS之前，我使用了以下代码（很久以前在某个地方找到了类似的jQuery解决方案，不记得在哪里了，所以功劳归功于匿名作者；可以轻松地从中获得Vanilla JS）：

$(document).ready(function () {
    var sticky_navigation_offset_top = $('nav').offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $('nav').css({
                'position': 'fixed',
                'top': 0,
                'left': 0,
                'right': 0,
                'margin-left': 'auto',
                'margin-right': 'auto'
            });
        } else {
            $('nav').css({
                'position': 'relative'
            });
        }
    };
    sticky_navigation();
    $(window).scroll(function () {
        sticky_navigation();
    });
});

Answer 8

遇到一些不明显的水平粘性行为：如果宽度为 100%，则粘性不起作用。宽度应该小于容器尺寸。

位置：粘不起作用

8 个答案: