猿问

“位置:粘性;”不起作用的CSS和HTML

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


catspeake
浏览 1412回答 3
3回答

慕后森

粘性定位是相对定位和固定定位的混合。将该元素视为相对位置,直到它超过指定的阈值为止,此时将其视为固定位置。...您必须指定的至少一个阈值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>

慕莱坞森

我碰到的几件事:当您的粘性元素是组件(角度等)时如果“粘性”元素本身是带有自定义元素选择器的组件,例如名为的角度组件<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的浏览器中进行测试,因为两者的行为可能会有所不同。
随时随地看视频慕课网APP
我要回答