“位置：粘性；”不起作用的CSS和HTML

Question

滚动到导航栏后，我想使其停留在顶部，但是它不起作用，我也不知道为什么。如果可以的话请帮我，这是我的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>

Answer 1

粘性定位是相对定位和固定定位的混合。将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。

...

您必须指定的至少一个阈值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>

Answer 2

我碰到的几件事：

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

如果“粘性”元素本身是带有自定义元素选择器的组件，例如名为的角度组件<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的浏览器中进行测试，因为两者的行为可能会有所不同。