“Position：sticky;”不工作的CSS和HTML [英] "Position: sticky;" not Working CSS and HTML

问题描述

我想让导航栏坚持到顶部，一旦我滚动到它，但它不工作，我不知道为什么。如果您可以请求帮助，这里是我的HTML和CSS代码：

。 nav-selections {text-transform：大写; letter-spacing：5px; font：18pxlato，sans-serif;显示：inline-block;文字修饰：无;白颜色;填充：18px; float：right; margin-left：50px;过渡：1.5秒; } .nav-selections：hover {transition：1.5s;颜色：黑色; } ul {background-color：＃B79b58;溢出：自动; } li {list-style-type：none; }

< nav style =position：sticky; position ：-webkit-sticky;> < ul align =left> < li>< a href =＃/ contactclass =nav-selectionsstyle =margin-right：35px;>联系人< / a>< / li> < li>< a href =＃/ aboutclass =nav-selections>关于< / a>< / li> < li>< a href =＃/ productsclass =nav-selections>产品< / a>< / li> < li>< a href =＃class =nav-selections>主页< / a>< / li> < / UL> < / nav>

解决方案

< blockquote>


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

...

您必须指定一个阈值并至少包含一个顶部，右边，底部或左键，粘滞定位的行为与预期相同。否则，它将与相对定位无法区分。
[来源：MDN


因此，在您的示例中，您必须使用<$ c $来定义最终应该保留的位置c> top 属性。

< {height：200％;} nav {position：sticky;位置：-webkit-sticky; top：0; / * required * /}。nav-selections {text-transform：uppercase; letter-spacing：5px; font：18pxlato，sans-serif;显示：inline-block;文字修饰：无;白颜色;填充：18px; float：right; margin-left：50px; transition：1.5s;}。nav-selections：hover {transition：1.5s;颜色：黑色;} ul {background-color：＃B79b58; overflow：auto;} li {list-style-type：none;}

 < NAV> < ul align =left> < li>< a href =＃/ contactclass =nav-selectionsstyle =margin-right：35px;>联系人< / a>< / li> < li>< a href =＃/ aboutclass =nav-selections>关于< / a>< / li> < li>< a href =＃/ productsclass =nav-selections>产品< / a>< / li> < li>< a href =＃class =nav-selections>主页< / a>< / li> < / nav>  

I want to make the Navigation Bar stick to the top once I scroll to it, but it's not working and I have no clue why. If you can please help, here is my HTML and CSS code:

.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>

解决方案

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
...
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. [source: MDN]

So in your example, you have to define the position where it should stick in the end by using the top property.

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>

这篇关于“Position：sticky;”不工作的CSS和HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！