“位置:粘性”属性是如何工作的?

我想让导航栏粘在视口的顶部一旦用户滚动页面，但它不工作，我不知道为什么。如果你可以帮助，这是我的HTML和CSS代码:

.container { min-height: 300vh; } .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; } <main class="container"> <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> </main>

当前回答

检查祖先元素是否有溢出集(例如overflow:hidden);试着切换它。您可能需要检查DOM树的位置高于您的预期=)。

这可能会影响你的位置:粘在一个后代元素上。

2017-12-19 00:36:39

其他回答

我不得不使用下面的CSS来让它工作:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

如果以上都不管用，那么……

遍历所有祖先元素，确保这些元素都没有overflow: hidden。您必须将此更改为overflow: visible

2019-03-04 10:10:16

溢出需要被移除或设置为initial来创建位置，这是TRUE: sticky作用于子元素。我在我的Angular应用中使用了材质设计，发现一些材质组件改变了溢出值。我的解决方案是

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}

2019-01-11 08:01:08

有趣的时刻，我不明显:至少在Chrome 70的位置:粘是不适用的，如果你已经使用DevTools设置。

2018-11-23 19:22:35

另一个position: sticky不能工作的常见场景是，如果它的父类有display: flex或display: grid。

在这种情况下发生的是粘性位置在工作，但你看不到它，因为元素被完全拉伸了。尝试使用align-self: baseline降低它的高度，你会看到效果。

2021-07-04 13:37:04

似乎导航栏被粘不应该在任何div或部分与其他内容。没有一个解决方案是为我工作，直到我把导航栏从div，导航栏与另一个topbar共享。我以前有topbar和导航栏包装一个共同的div。

2019-01-09 05:11:37

“位置:粘性”属性是如何工作的?

推荐文章

最新文章

标签