一旦我滚动到它,我想让导航栏坚持到顶部,但它不起作用,我不知道为什么.如果可以请求帮助,这是我的HTML和CSS代码:
.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>Mar*_*ack 243
检查祖先元素是否有溢出集(例如overflow:hidden); 尝试切换它.你可能不得不高出你期望的DOM树=).
这可能会影响您position:sticky的后代元素.
Mar*_*vin 140
粘性定位是相对定位和固定定位的混合.该元素被视为相对位置,直到它超过指定的阈值,此时它被视为固定位置.
...
您必须具有至少一个指定的阈值top,right,bottom,或left为粘稠定位像预期的那样.否则,它将与相对定位无法区分.[ 来源: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>小智 80
我有同样的问题,我在这里找到答案.
如果您的元素没有按预期粘贴,首先要检查的是应用于容器的规则.
具体来说,查找父级上设置的任何溢出属性.您不能使用:overflow: hidden,overflow: scroll或overflow: auto在position: sticky元素的父元素上.
小智 44
如果您遇到此问题并且您的粘性不起作用 - 尝试将父级设置为：
display: unset
为我工作
Bad*_*ash 26
position: sticky另一个可能不起作用的非常常见的情况是，如果它的父级有display: flex或display: grid。
在这种情况下发生的情况是粘性位置正在工作，但你看不到它，因为元素被完全拉伸。尝试使用降低其高度align-self: baseline，您会看到效果。
Sim*_*ver 25
我遇到的事情很少:
当你的粘性元素是一个组件(角等)
如果'sticky'元素本身是具有自定义元素选择器的组件,例如名为的角度组件<app-menu-bar>,则需要将以下内容添加到组件的css中:
:host { display: block; }
要么
app-menu-bar { display: block; } // (in the containing component's css)
特别是iOS上的Safari似乎display:block甚至需要app-root角度应用程序的根元素,否则它将不会粘连.
如果要创建一个组件,定义组件内部的CSS(影子DOM /封装样式),确保position: sticky被应用到"外"选择(例如,app-menu-bar在devtools应显示粘的位置),而不是一个顶级div 中组件.使用Angular,可以使用:host组件的css中的选择器来实现.
:host
{
position: sticky;
display: block; // this is the same as shown above
top: 0;
background: red;
}
其他
如果粘性元素后面的元素具有纯色背景,则必须添加以下内容以阻止其在下方滑动:
.sticky-element { z-index: 100; }
.parent-of-sticky-element { position: relative; }
您的粘性元素必须是第一个(在您的内容之前),如果使用top,则在使用之后bottom.
overflow: hidden在你的包装元素上使用会有一些复杂的问题- 通常它会杀死里面的粘性元素.在这个问题中解释得更好
当屏幕键盘可见时,移动浏览器可以禁用粘滞/固定定位项目.我不确定确切的规则(有没有人知道)但是当键盘可见时你正在看窗口中的某种"窗口",你将无法轻易地将事情坚持到实际可见的屏幕顶部.
确保你有:
position: sticky;
并不是
display: sticky;
Ezr*_*ton 20
从其他方向攻击这个Q。
想象这是一个游戏Find the nearest scrolling ancestor。
<!-- sticky not working -->
<h1 style="position: sticky; top:0;">Hello World</h1>问题：
<h1>。<body>。<body>滚动？FALSE=>“没有效果”。修复：“粘性正在工作”（<body>滚动？TRUE）。
body{
min-height: 300vh;
}<!-- sticky working -->
<h1 style="position: sticky; top: 0;">Hello World</h1>考虑到这一点 - 这里有一些“你好世界”“著名”的“不工作”场景粘性:)大多数情况与这些情况中的一个或多个相关。
不工作：
/* not working example */
aside{
position: sticky;
background: lightgray;
}
main{
height: 200vh;
}<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>修复（添加顶部）：
aside{
position: sticky;
top: 0;
}
main{
height: 200vh;
}<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>#extra-wrapper我通过添加溢出设置“破坏”粘性条auto- 或hidden- 或visible- 但没有任何剪辑的内容。
“问题”现在是最近的滚动祖先（#extra-wrapper）“没有”任何滚动（没有滚动条拖动选项==“无滚动祖先”）。
不工作：
/* 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>同样，相对于其最近的滚动祖先的粘性偏移。
#extra-wrapper我通过添加到元素来“破坏”粘性sticky。为什么它不起作用？现在的高度#extra-wrapper==高度aside内容（盒模型）== “无滚动祖先” ==“无效果”。
不工作：
/* not working example */
aside{
position: sticky;
top: 0;
background: lightgray;
}
main{
height: 200vh;
}<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>这就是真正“发生”的事情（我添加了高度#extra-wrapper）：
#extra-wrapper{
background: lightgray;
height: 40vh;
}
aside{
position: sticky;
top: 0;
}
main{
height: 200vh;
}<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>修复：更改粘性节点：
#extra-wrapper{
position: sticky;
top: 0;
}
aside{
}
#layout{
displ
}
main{
height: 200vh;
}<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>您创建 Flex/Grid 布局并将其中一个列设置为sticky。默认情况下，列高度为偶数=“最近祖先”（包装器）的高度==列高度=无滚动效果。
不工作：
#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
在职的：
#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>dan*_*y74 18
这是MarsAndBack和Miftah Mizwar答案的延续.
他们的答案是对的.但是,很难确定问题的祖先.
为了使这非常简单,只需在浏览器控制台中运行此jQuery脚本,它将告诉您每个祖先的overflow属性的值.
$('.your-sticky-element').parents().filter(function() {
console.log($(this));
console.log($(this).css('overflow'));
return $(this).css('overflow') === 'hidden';
});
祖先没有overflow: visible改变其CSS的地方!
另外,如其他地方所述,请确保您的粘性元素在CSS中具有此功能:
.your-sticky-element {
position: sticky;
top: 0;
}
Sticky如果您的父母使用 display ，则位置将不起作用flex。当我在一个解决方案中阅读此内容时
由于 flex box 元素默认拉伸，所有元素的高度相同，不能滚动。
因此，如果您display: flex;在父级上使用，则必须将其添加到粘性元素align-self: flex-start;并将高度设置为自动height: auto;
这是粘性元素类的样子
.stick-ontop {
position: -webkit-sticky !important; // for safari
position: sticky !important;
top: 0;
align-self: flex-start;
height: auto;
}
小智 7
似乎要粘贴的导航栏不应该位于具有其他内容的任何 div 或部分内。在我将导航栏从导航栏与另一个顶栏共享的 div 中取出之前，没有任何解决方案对我有用。我以前用普通 div 包裹了顶栏和导航栏。
我必须使用以下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
我知道已经太晚了。但我找到了一个解决方案，即使您在父元素中使用“overflow”或“display:flex”，“sticky”也会起作用。
脚步：
为要设置粘性的元素创建一个父元素（确保创建的元素相对于 body 或全宽和全高父元素）。
将以下样式添加到父元素：
{ 位置：绝对；高度：100vmax；}
对于粘性元素，请确保添加高于页面中所有元素的 z-index。
就是这样！现在它必须起作用了。问候
只是添加到此页面上的所有答案，如果您遇到position: sticky 无法工作的问题，那么您可以检查以下内容：
top、left或bottom必须right 设置为除autoposition: -webkit-stickyoverflow具有属性的祖先元素必须有高度align-self如果粘性已设置align-self: auto或align-self: stretch已设置，则更改值我写了一篇关于此的博客文章，这对于有兴趣了解更多信息的人可能有用。
\n从我的评论：
position:sticky需要一个coordonate 电话在哪里坚持
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 之外，还有 polyfill 可用于其他浏览器。这是一个实验规则，可以随时通过浏览器实现或不实现。Chrome 几年前添加了它然后又删除了它，它似乎又回来了……但是持续了多长时间？
最接近的是 position:relative + coordonates 在滚动到达粘滞点时更新，如果你想把它变成一个 javascript 脚本
小智 5
我知道这是一个旧帖子。但是，如果像我这样的人最近刚刚开始摆弄位置：粘性，这可能会很有用。
就我而言，我使用position:sticky作为网格项。它不起作用，问题是html元素上隐藏了溢出-x：。当我删除该属性后，它就工作得很好。将overflow-x:隐藏在body元素上似乎可以工作，但还不知道为什么。
小智 5
我知道这似乎已经得到了回答，但我遇到了一个特定的案例，我觉得大多数答案都没有抓住重点。
在overflow:hidden回答覆盖90％的病例。这或多或少是“粘性导航”场景。
但是粘性行为最好在容器的高度内使用。想想您网站右栏中的时事通讯表格，它会随着页面向下滚动。如果您的粘性元素是容器的唯一子元素，则容器的大小完全相同，并且没有滚动空间。
您的容器必须是您希望元素在其中滚动的高度。在我的“右列”场景中，哪个是左列的高度。实现这一点的最佳方法是display:table-cell在列上使用。如果你不能，并且float:right像我一样被困住了，你将不得不猜测用 Javascript 计算它的左列高度。