“;”的位置:粘;房地产工作?

粘性定位是相对定位和固定定位的混合。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。
.．.
必须至少使用其中之一指定阈值 top， right， bottom，或left 让粘性定位像预期的那样运行。否则，相对定位将无法区分。 (来源:中数) < / p >

所以在你的例子中，你必须使用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>

从我的评论来看:

position:sticky 需要一个坐标来告诉我该停在哪里

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 +坐标，当滚动到达粘性点时更新，如果你想将其转换为javascript脚本

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

这可能会影响后代元素上的position:sticky。

我也有同样的问题，我找到了答案在这里。

如果你的元素没有像预期的那样粘在一起，首先要检查应用到容器上的规则。

具体来说，查找元素的任何父元素上设置的溢出属性。你不能用: overflow: hidden， overflow: scroll或overflow: auto在position: sticky元素的父元素上。

我还遇到了一些事情:

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

• 如果“sticky”元素本身是一个带有自定义元素选择器的组件，比如一个名为<app-menu-bar>的angular组件，你将需要在该组件的css中添加以下内容:

    :host { display: block; }     // or use flexbox
  

或

    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.

• 如果你正在创建一个组件并在组件内部定义css (shadow DOM / wrapped styles)，请确保position: sticky被应用到'outer'选择器(例如。devtools中的app-menu-bar应该显示粘滞位置)而不是顶层的div 在组件。在Angular中，这可以通过组件css中的:host选择器来实现。

    :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, sticky元素必须是在内容之前;如果使用bottom, sticky元素必须是后,。

• 在包装器元素上使用overflow: hidden会有一些复杂情况——通常它会杀死里面的粘性元素。在这个问题中解释得更好

• 当屏幕键盘可见时，移动浏览器可能会禁用粘滞/固定位置的项目。我不确定确切的规则(有人知道吗)，但当键盘可见时，你是在看着窗口中的一种“窗口”，你将不容易将东西粘在屏幕的实际可见顶部。

• 确保你有:

  position: sticky;

  而不是

  display: sticky;

杂项可用性问题

• 如果你的设计要求在移动设备的屏幕底部粘贴内容，请谨慎。例如，在iPhone X上，它们会显示一条窄线来指示滑动区域(返回主页)，而该区域内的元素是不可点击的。所以如果你在那里放了什么东西，一定要在iPhone X上测试，用户才能激活它。一个大的“立即购买”按钮是没有好处的，如果人们不能点击它!
• 如果你在Facebook上投放广告，网页会显示在Facebook移动应用的“webview”控件中。特别是在显示视频时(你的内容只在屏幕的下半部分开始)——他们经常把你的页面放在一个可滚动的视口中，这实际上允许你的粘滞元素从页面顶部消失，从而把粘滞元素完全弄乱。确保在真实的广告环境中进行测试，而不仅仅是在手机浏览器或Facebook浏览器中进行测试，因为这些浏览器的表现都有所不同。

这是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使它有!

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

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

这里有两个答案:

1. 从body标签中删除overflow属性

2. 将height: 100%设置为body来修复overflow-y: auto的问题

min-height: 100%不能工作而不是height: 100%

有趣的时刻，对我来说并不明显:至少在Chrome 70中，如果你使用DevTools设置position: sticky，它就不会被应用。

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

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

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

我不得不使用下面的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

如果danday74的修复不起作用，检查父元素是否有一个高度。

我知道这是一个老帖子。但如果有人像我一样，最近才开始摆弄位置:粘性，这可能是有用的。

在我的例子中，我使用position: sticky作为网格项。它没有工作，问题是一个overflow-x:隐藏在html元素上。只要我删除了该属性，它就工作得很好。在body元素中隐藏overflow-x:似乎可以工作，但还不知道为什么。

我相信这篇文章说了很多关于sticky是如何工作的

如何CSS位置粘真的工作! CSS的位置粘滞有两个主要部分，粘性物品&粘性的容器.

粘性项 -是我们用position: sticky styles定义的元素。当视口定位时，元素将浮动 匹配位置定义，例如:top: 0px .

.

粘性的容器 -是包装粘性项的HTML元素。这是粘性物品可以漂浮的最大面积。

当你用position: sticky定义一个元素时，你会自动 将父元素定义为粘性容器!< / p >

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

overflow:hidden的答案覆盖了90%的情况。这或多或少是“粘性导航”的情况。

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

我使用了JS解决方案。它适用于Firefox和Chrome浏览器。有任何问题，请告诉我。

超文本标记语言

<body>
<header id="header">
<h1>Extra-Long Page Heading That Wraps</h1>
<nav id="nav">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">Page 2</a></li>
<li><a href="" title="">Page 3</a></li>
</ul>
</nav>
</header>
<main>
<p><!-- ridiculously long content --></p>
</main>
<footer>
<p>FOOTER CONTENT</p>
</footer>
<script src="navbar.js" type="text/javascript"></script>
</body>

css

nav a {
background: #aaa;
font-size: 1.2rem;
text-decoration: none;
padding: 10px;
}


nav a:hover {
background: #bbb;
}


nav li {
background: #aaa;
padding: 10px 0;


}


nav ul  {
background: #aaa;
list-style-type: none;
margin: 0;
padding: 0;


}


@media (min-width: 768px) {


nav ul {
display: flex;
}
}

js

function applyNavbarSticky() {
let header = document.querySelector('body > header:first-child')
let navbar = document.querySelector('nav')
header.style.position = 'sticky'


function setTop() {
let headerHeight = header.clientHeight
let navbarHeight = navbar.clientHeight
let styleTop = navbarHeight - headerHeight


header.style.top = `${styleTop}px`
}


setTop()


window.onresize = function () {
setTop()
}
}

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

display: unset

为我工作

z-index也是非常重要的。有时候它会起作用，只是你看不到而已。试着把它设置为一个非常高的数字，只是为了确定。也不要总是放top: 0，而是尝试一些更高的东西，以防它隐藏在某个地方(在工具栏下)。

粘滞元素的真实行为是:

• 首先，在一段时间内它是相对的
• 然后它会被修复一段时间
• 最后，它从视图中消失了

一个固定定位的元素被视为相对定位，直到它的包含块在其流根(或它滚动的容器)内越过指定的阈值(例如将top设置为非auto值)，此时它被视为“卡住”。直到遇到其所在块的对边为止。

元素根据文档的正常流定位，然后根据顶部、右侧、底部和左侧的值相对于其最近的滚动祖先和包含块(最近的块级祖先)进行偏移，包括与表相关的元素。偏移量不会影响任何其他元素的位置。

这个值总是创建一个新的堆叠上下文。注意，粘滞元素“sticks"到其最近的祖先，具有“滚动机制”;(当overflow被隐藏、滚动、自动或覆盖时创建)，即使该祖先不是最近的实际滚动祖先。

这个例子将帮助你理解:

code https://codepen.io/darylljann/pen/PpjwPM

这是什么绊倒了我…我的sticky div在另一个div里面，所以父div需要一些额外的内容在sticky div之后，以使父div“足够高”。对于黏黏的div“滑过”;其他内容，请向下滚动。

所以在我的情况下，在黏黏的div之后，我必须添加:

    %div{style:"height:600px;"}
 

(我的应用程序有两个并排的div，有一个"tall"左边是图像，右边是一个简短的数据输入表单，我想让数据输入表单在你向下滚动时漂浮在图像旁边，所以表单总是在屏幕上。直到我添加了上面的“额外内容”，它才会工作。这样粘性div就有东西可以“滑过”了;

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

我知道太晚了。但是我找到了一个解决方案。

步骤:

1. 为你想要设置粘性的元素创建一个父元素(确保创建的元素是相对于主体或全宽度&父母全高度)。

2. 添加以下样式到父元素:
   < p > { 位置:绝对的; 身高:100 vmax; } < / p >
3. 对于粘滞元素，确保添加的z-index高于页面中所有元素。

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

关于position sticky最常见的错误之一是:

1. 浏览器不支持
2. 不包括任何上、下、右、左属性。请记住，如果您没有提供足够的信息，浏览器将不知道如何正确处理这些信息。它将只是statically定位没有它。

我已经写了关于这个文章的更多内幕。只是做个参考，这样我就不会重复太多了。

Sticky Position将不工作，如果你的父级正在使用显示flex。当我在一个溶液中读到这个

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

因此，如果你在parent上使用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;
}

我也有同样的问题。对我来说，问题在于大屏幕上的显示:“none”(media-query)和智能手机上的显示:“initial”。如果我删除了display css属性，并在桌面上添加了不透明度和指针事件，一切都解决了。

另一种非常常见的情况是，position: sticky可能无法工作，如果它的父节点有display: flex或display: grid。

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

尽管阅读了整个页面，尝试了所有的方法，但在我的移动设备上，这就是不能工作。没有任何棘手的操作——这是我唯一需要它发挥作用的地方。我已经排除了任何特殊的名称或覆盖，将阻止它在这个屏幕宽度的功能。清除我的移动格式化代码作为测试，没有看到任何变化。在我笔记本电脑上的Chrome浏览器上运行得很好，但在我的新S10上的Chrome浏览器上就完全不行。

1.如果overflow在元素的任何父元素上设置为hidden、scroll或auto，位置粘滞很可能不起作用。

2.如果任何父元素都设置了高度，位置粘滞可能无法正常工作。

注意空网格区域!

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

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

我想让summary网格项在用户完成结帐表单时保持粘性。它没有工作，因为那些empty grid items(标记为.)。

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

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

// Sticky Code

const stickyItem = document.querySelector(".item- made-sticky")

document.addEventListener("scroll"， () =>｛ stickkyitem .style.transform = translateY(${window.scrollY}px) }) < / p >

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

想象这是一个游戏Find the nearest scrolling ancestor。

<!-- sticky not working -->
<h1 style="position: sticky; top:0;">Hello World</h1>

问题:

• 1/3:粘节点?<h1>。
• 2/3:祖先?<body>。
• 3/3: <body>滚动?FALSE =比;“没有effect"。

修复:“粘是工作”;(<body>滚动?TRUE)。

body{
min-height: 300vh;
}

<!-- sticky working -->
<h1 style="position: sticky; top: 0;">Hello World</h1>

考虑到这一点-这里有一些“你好，世界”;“famous"“不工作”的情景;大多数案件都与这些案件中的一个或多个有关。

案例1:缺少“top”;(容易修复):

/* 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>

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

我“destroy"通过添加#extra-wrapper和溢出设置auto -或- hidden -或- visible -但没有任何剪辑的内容。

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

/* 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:粘滞与“错误/不滚动”有关;节点(难以修复)

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

我“destroy"通过将#extra-wrapper添加到sticky元素来改变粘性。为什么它不起作用?现在#extra-wrapper的高度== height aside content (盒模型) == “没有滚动祖先”; ==“没有效果”。

/* 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>

这才是真正“发生”的事情。(我将height添加到#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>

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

你创建了flex/网格布局&将其中一个cols设置为sticky。默认情况下，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高度不是偶数)。

#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>

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

对于位置:粘;要工作，你的sticky元素应该放在body标签的右边，作为一个直接的子元素 不应该有任何包装divs或类似的东西。 因为它只能在到达父元素的底部之前保持固定。 你应该指定它应该粘在哪里，比如:top: 0;