“位置：粘稠;”不工作的CSS和HTML

我想让导航栏坚持到顶部，一旦我滚动到它，但它不工作，我不知道为什么。如果你能请帮助，这是我的HTML和CSS代码：“位置：粘稠;”不工作的CSS和HTML

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

来源

2017-04-30 Harleyoc1

位置：粘贴需要一个坐标到电话的位置 –

您还必须小心父元素。 ['位置：粘性'可以停止工作，如果它在柔性盒内部，除非你小心]（https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox ），并且如果在它和它内部滚动的内容之间有一个“overflow：hidden”或“overflow：auto”，它也会失败（体内根或最近的祖先有overflow：scroll） – user568458

置顶定位是相对固定定位的混合体。该元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定位置。
...
必须与top至少一个，right，bottom，或者left指定一个阈值粘性定位像预期的那样。否则，它将与相对定位无法区分。 [source: 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>

来源

2017-04-30 13:57:35 Marvin

谢谢你的工作 – Harleyoc1

从我的评论：

nav { 
 
    position: sticky; 
 
    top: 0; 
 
} 
 

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

 
body { 
 
    height: 200vh; 
 
}

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

有填充工具使用其他浏览器比FF和Chrome。这是一个可以在任何时候通过浏览器实现的实验规则。 Chrome几年前添加它，然后放弃它，它似乎回来了...但是多久？

最接近的将是位置：更新滚动时一度达到粘点，如果你想要把它变成一个javascript脚本

来源

2017-04-30 13:59:50

非常感谢你的工作！ – Harleyoc1

检查父元素具有溢出相对+ coordonates：隐藏;尝试切换它。

这可能会影响您的位置：粘在子元素上。

来源

2017-12-19 00:36:39 MarsAndBack

希望我可以多次赞扬你！这比我想要承认的更频繁地咬伤我。 –

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

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

具体而言，请查找父级上设置的任何溢出属性。 您不能在position: sticky元素的父级上使用：overflow: hidden，overflow: scroll或overflow: auto。

来源

2018-03-03 04:58:02

“位置：粘稠;”不工作的CSS和HTML

回答

相关问题