当我知道 sticky CSS 属性回归并得到最新的 Chrome 更新支持时,我非常高兴,但令我惊讶的是,该元素出于某种原因是不可见的?
粘性工作得很好,当页面滚动时,元素会粘在其预定义的位置,但由于某些奇怪的原因,该元素完全不可见,所以有人知道这种奇怪的行为吗?
我还注意到,如果父 DIV 使用 overflow: hidden 属性(通常在页面包装器上),粘性功能将停止工作,这也是一种奇怪的行为,因为许多现代网站使用可滚动的 DIV,并且它们很可能还会为平板电脑和移动设备使用隐藏的抽屉菜单。
但是这种消失的行为呢?
更新:
我在 Codepen 中复制了该行为,这里是一个使用与我的开发示例中相同的 HTML 和 CSS 的示例。
我没有包含所有 CSS,只包含显示问题所需的内容,并且我已将问题确定到页脚中的社交媒体菜单,即如果我删除该菜单中的图标 ( <i></i>
),粘性侧边栏再次出现?
<div class="social-menu">
<ul class="nav nav-pills">
<li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-facebook i-3x">Facebook</i></a></li>
<li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-twitter i-3x">Twitter</i></a></li>
<li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-google i-3x">Google Plus</i></a></li>
<li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-instagram i-3x">Instagram</i></a></li>
</ul>
</div>
注意:
问题可以在 Chrome 版本 56.0.2924.87(64 位)中重现
但在 Chrome 版本 57.0.2987.21 beta(64 位)中工作得很好
最佳答案
好吧,由于某种原因,导致粘性元素消失的是图标的 text-indent
属性。
之前:
[class^="i-"], [class*=" i-"] { ... text-indent: -9999px; ... }
之后:
[class^="i-"], [class*=" i-"] { ... text-indent: 9999px; ... }
将 text-indent
从负数更改为正数似乎使粘性元素再次出现。
有点奇怪,因为整个页面都使用了图标,但只有页脚中的图标,这是谁造成的?
更新:
正文本缩进 text-indent: 9999px;
在 Safari 中引起了很多奇怪的问题,即保存网页内容的页面包装器突然可以水平滚动 9999 像素。
任何知道如何保持负文本缩进 text-indent: -9999px;
,并且仍然让粘性元素 position: sticky;
在 Chrome 中可见的人?
解决方法:
啊,找到问题了,既有趣又令人沮丧:)
图标属性中的文本缩进 text-indent: -9999px;
和空格 white-space: nowrap;
的组合,出于某种原因是原因针对水平滚动 (Safari) 和不可见的粘性元素 (Chrome) 这两个问题。
之前:
[class^="i-"], [class*=" i-"] { ... text-indent: -9999px; white-space: nowrap; ... }
之后:
[class^="i-"], [class*=" i-"] { ... text-indent: -9999px; white-space: nowrap; overflow: hidden; ... }
现在一切正常。
关于html - 位置 : sticky is back in Chrome 56, 但元素不可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42065295/