位置：当 html 高度：100% 时，粘性不起作用答案

【问题标题】：position: sticky doesn't work when html height: 100%位置：当 html 高度：100% 时，粘性不起作用
【发布时间】：2018-07-28 23:15:45
【问题描述】：

这是我为两个相关项目准备的 CSS...

html, body {
background-image: url("../images/background.png");
background-attachment: fixed;
height: 100%;

}

--和--

#navBar {
    font-family: Cinzel;
    position: sticky;
    top: 0;
    z-index: 1;
}

我的导航栏显示在它应该显示的位置，但在上下移动网页时只是滚动。如果我删除 html {height: 100%;}，则粘性导航栏会起作用。我的目标是滚动然后粘贴效果。

非常感谢任何建议！

【问题讨论】：

标签： html css height navbar sticky

【解决方案1】：

您的目标似乎是设置覆盖画布/屏幕的背景。如果是这种情况，您可能想尝试更改您的 css 属性。那么，不要将高度设置为 100%。试试这个：

background: url(../../img/back-lettre.jpg) fixed no-repeat;
background-size: cover;
-webkit-background-size: cover; /* Chrome & Safari */
-moz-background-size: cover; /* Firefox */
-o-background-size: cover; /* Opera */

如果这可行，它可能会帮助您避免阻止您的 position: sticky; 工作的设置。

【讨论】：