我想让导航栏粘在视口的顶部一旦用户滚动页面,但它不工作,我不知道为什么。如果你可以帮助,这是我的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>


当前回答

使用这个博客(https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working)中的策略,我为那些无法控制页面中所有组件的人提供了一个选项

我使用的是Angular,在ngOnInit方法中,我运行这段代码来将父类的可见属性更改为可见

/**
 * position: sticky
 * only works if all parent components are visibile
 */
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
  const hasOverflow = getComputedStyle(parent).overflow;
  if (hasOverflow !== 'visible') {
    parent.style.overflow = 'visible';
    // console.log(hasOverflow, parent);
  }
  parent = parent.parentElement;
}

其他回答

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

我知道太晚了。但我发现了一个解决方案,即使你使用溢出或显示:flex在父元素粘性将工作。

步骤:

为你想要设置粘性的元素创建一个父元素(确保创建的元素是相对于主体或全宽和全高的父元素)。 向父元素添加以下样式: { 位置:绝对的; 身高:100 vmax; } 对于粘滞元素,请确保添加的z-index高于页面中的所有元素。

就是这样!现在它必须起作用。问候

这里有两个答案:

从正文标签中移除溢出属性 设定高度:100%到机身以解决溢出问题y:自动

Min-height: 100%不工作,而不是高度:100%

如果你遇到这种情况,你的粘性不工作-试着设置父:

display: unset

为我工作

如果parent有float:属性,它就不起作用。