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


当前回答

注意空网格区域!

在我的例子中,我有这样的东西:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

我希望当用户完成结帐表单时,总结网格项具有粘性。它没有工作,因为那些空的网格项(用。标记)。

解决方案是删除这些空项,如下所示:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}

其他回答

如果你的父母正在使用显示伸缩,粘滞位置将不起作用。当我在一个溶液中读到这个

由于flex box元素默认为拉伸,因此所有元素的高度都相同,不能滚动。

如果你使用display: flex;在父元素上,你必须添加这个到sticky元素align-self: flex-start;同时设置height为auto height: auto;

这就是sticky元素类的样子

.stick-ontop {
  position: -webkit-sticky !important; // for safari
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}

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

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

使用这个博客(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;
}

这是MarsAndBack和Miftah Mizwar回答的延续。

他们的答案是正确的。但是,很难确定问题的始祖。

简单来说,只需在浏览器控制台中运行这个jQuery脚本,它就会告诉您每个祖先上overflow属性的值。

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

如果一个祖先没有溢出:可见改变它的CSS使它有!

同样,正如在其他地方所述,确保你的sticky元素在CSS中有这个:

.your-sticky-element {
    position: sticky;
    top: 0;
}

我知道这个问题似乎已经有了答案,但我遇到了一个具体的案例,我觉得大多数答案都没有抓住重点。

溢出:隐藏答案覆盖了90%的情况。这或多或少是“粘性导航”的情况。

但是粘性行为最好在容器高度内使用。想象一下,在你网站的右栏中,有一个新闻简报的形式,它可以随着页面向下滚动。 如果sticky元素是容器的唯一子元素,那么容器的大小是完全相同的,并且没有滚动的空间。

你的容器需要是你期望元素滚动的高度。在右列的情况下就是左列的高度。 实现这一点的最佳方法是在列上使用display:table-cell。如果你不能,并且像我一样被float:right困住了,你必须要么猜左列的高度,要么用Javascript计算它。