position: sticky doesn't work when html height: 100%

Question

So here's the CSS I have for the two relevant items...

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

}

--and--

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

My navbar displays where it should, but just scrolls away when moving up and down the webpage. If I remove html {height: 100%;}, then the sticky navbar works. My goal is for the scroll- then- stick effect.

Any advice is greatly appreciated!

Answer 1

It seems like your goal is to set a background that covers a canvas/the screen. If it's the case, you may want to try to change your css property. Don't set the height to 100%, then. Try this instead:

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

If this works, it may help you avoid the setting that prevents your position: sticky; from working.