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

其他回答

从另一个方向攻击这个Q。

想象这是一个寻找最近的滚动祖先的游戏。

<!——粘性不起作用——> <h1 style=" font - family:宋体;上图:0;“> Hello World h1 > < /

问题:

1/3:粘节点?< h1 >。 2/3:祖先?< >。 3/3: <body> scrolling ?FALSE => "No effect"。

修复:“粘性工作”(<身体>滚动?真正的)。

身体{ 最小高度:300 vh; } <!——粘性工作——> <h1 style=" font - family:宋体;上图:0;“> Hello World h1 > < /

记住这一点-这里有一些“hello world”“著名”的“不工作”粘性场景:)大多数情况都与这些情况中的一个或多个有关。

案例1:缺少“顶部”(很容易修复):

不工作: /*不工作的例子*/ 除了{ 位置:粘性; 背景:浅灰色; } 主要{ 身高:200 vh; } 除了< > 除了< h2 >的< / h2 > 除了< / > <大> <标题> < / h1 >条 <p>我是孤独的,神圣的,神圣的。我的判决减去骚扰和自然之美,在时间上的理性和权利,别名,官方的假设,官场,权位,权位,权位,权位,权位,权位! < / p > 主> < /

修复(添加顶部):

旁白{ 位置:粘性; 顶部: 0; } 主{ 高度:200vh; } <aside> <h2>粘性旁</h2> </aside> <main> <h1>品</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main>

案例2:粘节点和溢出(容易修复):

我通过添加#extra-wrapper来“破坏”粘性,溢出设置为auto -or- hidden -or- visible -但没有任何剪切内容。

"The problem"现在是最近的滚动祖先(#extra-wrapper)"without"任何滚动(没有滚动条拖动选项== " No scrolling祖宗")。

Not working: /* not working example */ #overflow-wrapper{ overflow: scroll; } aside{ position: sticky; background: lightgray; top: 0px; } main{ height: 200vh; } <div id="overflow-wrapper"> <aside> <h2>sticky Aside</h2> </aside> <main> <h1>Article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main> </div>

修正-剪辑内容(现在他们是“最近的滚动祖先”)。

工作:

/* not working example */ #overflow-wrapper{ overflow: scroll; max-height: 60vh; /* clip the content */ } aside{ position: sticky; background: lightgray; top: 0px; } main{ height: 200vh; } <div id="overflow-wrapper"> <aside> <h2>sticky Aside</h2> </aside> <main> <h1>Article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main> </div>

案例3:与“错误/不滚动”节点相关的粘滞(难以修复)

同样,粘滞偏移相对于它最近的滚动祖先。

我通过添加#extra-wrapper到sticky元素来“破坏”sticky。为什么它不起作用?现在#extra-wrapper的高度== height aside content (box model) == "no scrolling祖宗" == "no effect"。

不工作: /*不工作的例子*/ 除了{ 位置:粘性; 上图:0; 背景:浅灰色; } 主要{ 身高:200 vh; } < div id = " extra-wrapper " > 除了< > 除了< h2 >的< / h2 > 除了< / > < / div > <大> <标题> < / h1 >条 <p>我是孤独的,神圣的,神圣的。我的判决减去骚扰和自然之美,在时间上的理性和权利,别名,官方的假设,官场,权位,权位,权位,权位,权位,权位! < / p > 主> < /

这是真正“发生”的事情(我在#extra-wrapper中添加了height):

#extra包装器{ 背景:浅灰色; 高度:40VH; } 旁白{ 位置:粘性; 顶部: 0; } 主{ 高度:200vh; } <div id=“extra-wrapper”> <aside> <h2>粘性旁</h2> </aside> </div> <main> <h1>品</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main>

解决办法: 更改sticky节点:

#extra包装器{ 位置:粘性; 顶部: 0; } 旁白{ } #layout{ 迪斯普 } 主{ 高度:200vh; } <div id=“extra-wrapper”> <aside> <h2>粘性旁</h2> </aside> </div> <main> <h1>品</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main>

案例4:显示:flexbox/网格布局-甚至cols by deafult(棘手的修复)

创建伸缩/网格布局,并设置cols之一为粘性。默认情况下,cols高度是偶数=“最近的祖先”(包装器)的高度== cols高度=无滚动效果。

不工作:

#extra-wrapper{ position: sticky; top: 0; border: 1px solid red; } aside{ } #layout{ display: flex; } main{ height: 200vh; } <div id="layout"> <div id="extra-wrapper"> <aside> <h2>sticky Aside</h2> </aside> </div> <main> <h1>Article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main> </div>

修复:设置粘在一边max-height为90vh为例(现在cols高度不均匀)。

Working: #extra-wrapper{ position: sticky; top: 0; border: 1px solid red; max-height: 90vh; } aside{ } #layout{ display: flex; } main{ height: 200vh; } <div id="layout"> <div id="extra-wrapper"> <aside> <h2>sticky Aside</h2> </aside> </div> <main> <h1>Article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> </main> </div>

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

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

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

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

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

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

由于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;
}

我还遇到了一些事情:

当你的sticky元素是一个组件时(angular等)

如果“sticky”元素本身是一个带有自定义元素选择器的组件,比如一个名为<app-menu-bar>的angular组件,你需要在该组件的css中添加以下内容: :主机{显示:块;} //或使用flexbox

or

    app-menu-bar  { display: block; }   // (in the containing component's css)

Safari on iOS in particular seems to require `display:block` even on the root element `app-root` of an angular application or it won't stick.

If you are creating a component and defining the css inside the component (shadow DOM / encapsulated styles), make sure the position: sticky is being applied to the 'outer' selector (eg. app-menu-bar in devtools should show the sticky position) and not a top level div within the component. With Angular, this can be achieved with the :host selector in the css for your component. :host { position: sticky; display: block; // this is the same as shown above top: 0; background: red; }

其他

If the element following your sticky element has a solid background, you must add the following to stop it from sliding underneath: .sticky-element { z-index: 100; } .parent-of-sticky-element { position: relative; } Your sticky element must be before your content if using top and after it if using bottom. There are complications when using overflow: hidden on your wrapper element – in general it will kill the sticky element inside. Better explained in this question Mobile browsers may disable sticky/fixed positioned items when the onscreen keyboard is visible. I'm not sure of the exact rules (does anybody ever know) but when the keyboard is visible you're looking at a sort of 'window' into the window and you won't easily be able to get things to stick to the actual visible top of the screen. Make sure you have: position: sticky; and not display: sticky;

杂项可用性问题

Be cautious if your design calls for for sticking things to the bottom of the screen on mobile devices. On iPhone X for instance they display a narrow line to indicate the swipe region (to get back to the homepage) - and elements inside this region aren't clickable. So if you stick something there be sure to test on iPhone X that users can activate it. A big 'Buy Now' button is no good if people can't click it! If you're advertising on Facebook the webpage is displayed in a 'webview' control within Facebook's mobile apps. Especially when displaying video (where your content begins in the bottom half of the screen only) - they often completely mess up sticky elements by putting your page within a scrollable viewport that actually allows your sticky elements to disappear off the top of the page. Be sure to test in the context of an actual ad and not just in the phone's browser or even Facebook's browser which can all behave differently.