【问题标题】: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; 工作的设置。

    【讨论】:

      猜你喜欢
      • 2018-09-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-07
      • 2016-03-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多