“位置：粘性；”不起作用的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 {&nbsp; height: 200%;}nav {&nbsp; position: sticky;&nbsp; position: -webkit-sticky;&nbsp; top: 0; /* required */}.nav-selections {&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 5px;&nbsp; font: 18px "lato", sans-serif;&nbsp; display: inline-block;&nbsp; text-decoration: none;&nbsp; color: white;&nbsp; padding: 18px;&nbsp; float: right;&nbsp; margin-left: 50px;&nbsp; transition: 1.5s;}.nav-selections:hover {&nbsp; transition: 1.5s;&nbsp; color: black;}ul {&nbsp; background-color: #B79b58;&nbsp; overflow: auto;}li {&nbsp; list-style-type: none;}<nav>&nbsp; <ul align="left">&nbsp; &nbsp; <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>&nbsp; &nbsp; <li><a href="#/about" class="nav-selections">About</a></li>&nbsp; &nbsp; <li><a href="#/products" class="nav-selections">Products</a></li>&nbsp; &nbsp; <li><a href="#" class="nav-selections">Home</a></li>&nbsp; </ul></nav>

Answer 2

我碰到的几件事：当您的粘性元素是组件（角度等）时如果“粘性”元素本身是带有自定义元素选择器的组件，例如名为的角度组件<app-menu-bar>，则需要在组件的css中添加以下内容：:host { display: block; }&nbsp; &nbsp;要么app-menu-bar&nbsp; { display: block; }&nbsp; &nbsp;// (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{&nbsp; &nbsp; position: sticky;&nbsp; &nbsp; display: block;&nbsp; &nbsp;// this is the same as shown above&nbsp; &nbsp; top: 0;&nbsp; &nbsp; background: red;&nbsp; &nbsp;&nbsp;}其他如果粘滞元素后面的元素具有固定背景，则必须添加以下内容以阻止其在下面滑动：.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的浏览器中进行测试，因为两者的行为可能会有所不同。