Html “怎么说？”；位置：粘性&引用；物业工作？

当用户滚动页面时，我想让导航栏粘在视口顶部，但它不起作用，我也不知道为什么。如果您能提供帮助，以下是我的HTML和CSS代码：

.container{
最小高度：300vh；
}
.导航选择{
文本转换：大写；
字母间距：5px；
字体：18px“拉托”，无衬线；
显示：内联块；
文字装饰：无；
颜色：白色；
填充：18px；
浮动：对；
左边距：50像素；
过渡：1.5s；
}
.导航选择：悬停{
过渡：1.5s；
颜色：黑色；
}
保险商实验室{
背景色：#B79b58；
溢出：自动；
}
李{
列表样式类型：无；
}

粘性定位是相对定位和固定定位的混合。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。
…
您必须至少使用

顶部

、

右侧

、

底部

或

左侧

中的一个来指定阈值，粘性定位才能按预期运行。否则，它将无法与相对定位区分开来。 []

因此，在您的示例中，您必须使用

top

属性定义它应该粘贴在最后的位置

html，正文{
身高：200%；
}
导航{
位置：粘性；
职位：-网络工具包粘性；
顶部：0；/*必需*/
}
.导航选择{
文本转换：大写；
字母间距：5px；
字体：18px“拉托”，无衬线；
显示：内联块；
文字装饰：无；
颜色：白色；
填充：18px；
浮动：对；
左边距：50像素；
过渡：1.5s；
}
.导航选择：悬停{
过渡：1.5s；
颜色：黑色；
}
保险商实验室{
背景色：#B79b58；
溢出：自动；
}
李{
列表样式类型：无；
}

根据我的评论：

position:sticky

需要一个合作伙伴来告诉他粘贴的位置

nav{
位置：粘性；
排名：0；
}
.导航选择{
文本转换：大写；
字母间距：5px；
字体：18px“拉托”，无衬线；
显示：内联块；
文字装饰：无；
颜色：白色；
填充：18px；
浮动：对；
左边距：50像素；
过渡：1.5s；
}
.导航选择：悬停{
过渡：1.5s；
颜色：黑色；
}
保险商实验室{
背景色：#B79b58；
溢出：自动；
}
李{
列表样式类型：无；
}
身体{
高度：200vh；
}

检查祖先元素是否设置了溢出（例如

溢出：隐藏

）；试着切换一下。您可能需要在DOM树上的位置高于预期值=）

---

这可能会影响子元素上的

位置：sticky

。

我也有同样的问题，我找到了答案

如果您的元素没有像预期的那样粘滞，那么首先要检查应用于容器的规则

---

具体地说，查找元素的任何父级上设置的任何溢出属性您不能在

位置：粘滞
元素的父元素上使用
溢出：隐藏
，
溢出：滚动
或
溢出：自动
。
我遇到的其他几件事：

当粘性元素是一个组件时（角度等）


如果“粘性”元素本身是具有自定义元素选择器的组件，例如名为


当屏幕键盘可见时，移动浏览器可能会禁用粘性/固定位置的项目。我不确定确切的规则（有人知道吗），但当键盘可见时，你看到的是一个窗口，你很难把东西粘到屏幕的实际可见顶部


确保您有：

位置：粘性

而不是

显示：粘性



其他可用性问题


如果您的设计要求在移动设备上将东西粘贴到屏幕底部，请谨慎。例如，在iPhoneX上，它们会显示一条窄线来表示滑动区域（返回主页），而该区域内的元素是不可点击的。所以，如果你粘贴了一些东西，一定要在iPhoneX上测试，用户可以激活它。如果人们不能点击一个大的“立即购买”按钮，那么它是不好的
如果你在Facebook上做广告，该网页将显示在Facebook移动应用程序中的“webview”控件中。尤其是在显示视频时（您的内容仅从屏幕的下半部分开始），它们通常会将页面放在可滚动的视口中，从而完全弄乱粘性元素，从而使粘性元素从页面顶部消失。一定要在实际广告的背景下进行测试，而不仅仅是在手机浏览器，甚至Facebook的浏览器中，因为它们的行为可能会有所不同
这是马桑德巴克和米兹瓦尔回答的延续

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

为了使这变得非常简单，只需在浏览器控制台中运行这个jQuery脚本，它就会告诉您每个祖先的overflow属性的值

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

如果一个祖先没有溢出：可见，请更改它的CSS，这样它就可以了

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

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

这里有两个答案：

从
正文
标记中删除
溢出
属性

将
height:100%
设置到
body
以解决
overflow-y:auto的问题

最小高度：100%  :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; }

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

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

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

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

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

display: unset

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

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

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