3

This is my HTML file:

    .jumbotron {
       font-size: 20px;
       padding: 60px;
       background-color: #00a8ec;
       text-align: center;
       color: white;
    }
    
    header {
       display: inline;
    } 
    
    nav {
       background-color: #00b2a6;
       padding: 5px;
       position: sticky;
       top: 0;
    }
    
    footer {
        padding: 20px;
        color: white;
        background-color: #00b2a6;
        text-align: center;
        font-weight: bold;
     }
<!DOCTYPE html>
    <html>
        <head>
            <title>TITLE</title>
            <link rel="stylesheet" href="tes.css">
        </head>
        <body>
            <header>
                <div class="jumbotron">
                    <h1>TITLE</h1>
                    <p>DESCRIPTION</p>
                </div>
                <nav>
                    <ul>
                        <li><a href="#sejarah">Sejarah</a></li>
                        <li><a href="#geografis">Geografis</a></li>
                        <li><a href="#wisata">Wisata</a></li>
                    </ul>
                </nav>
            </header>
    
            <main>
                <div id="content">
                    <pre>Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                    </pre>
                        
                </div>
    
              
            <footer>
                <p>FOOTER</p>
            </footer>
            
        
        </body>
    
    </html>

I still do not understand why my sticky navigation will only work if I set the header item in HTML with display:inline ? If I remove that property, the sticky navigation will not work anymore.

I am in my way in learning HTML and CSS, thank you very much for your support!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Shalahuddin Al-Ayyubbi
  • 388
  • 2
  • 14
  • 1
    Because by that you are changing what the _containing block_ for the `sticky` element actually is. https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block – CBroe Jun 17 '20 at 10:18

1 Answers1

2

You found a hack to force it to work. When using inline you will have block level elements inside inline level element which is invalid and it's like the inline element no more exist (this is a simplified explanation, in reality it's a bit more complex1).

Your code is exactly like not having header:

.jumbotron {
  font-size: 20px;
  padding: 60px;
  background-color: #00a8ec;
  text-align: center;
  color: white;
}

nav {
  background-color: #00b2a6;
  padding: 5px;
  position: sticky;
  top: 0;
}

footer {
  padding: 20px;
  color: white;
  background-color: #00b2a6;
  text-align: center;
  font-weight: bold;
}
<div class="jumbotron">
    <h1>TITLE</h1>
    <p>DESCRIPTION</p>
  </div>
  <nav>
    <ul>
      <li><a href="#sejarah">Sejarah</a></li>
      <li><a href="#geografis">Geografis</a></li>
      <li><a href="#wisata">Wisata</a></li>
    </ul>
  </nav>


<main>
  <div id="content">
    <pre>Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                    </pre>

  </div>


  <footer>
    <p>FOOTER</p>
  </footer>

Sticky won't work if you wrap it inside another container. It need to be directly placed inside your body where you have the long content .

When using header, add border to understand the issue:

.jumbotron {
  font-size: 20px;
  padding: 60px;
  background-color: #00a8ec;
  text-align: center;
  color: white;
}
header {
  border:5px solid red;
}
nav {
  background-color: #00b2a6;
  padding: 5px;
  position: sticky;
  top: 0;
}

footer {
  padding: 20px;
  color: white;
  background-color: #00b2a6;
  text-align: center;
  font-weight: bold;
}
<header>
<div class="jumbotron">
    <h1>TITLE</h1>
    <p>DESCRIPTION</p>
  </div>
  <nav>
    <ul>
      <li><a href="#sejarah">Sejarah</a></li>
      <li><a href="#geografis">Geografis</a></li>
      <li><a href="#wisata">Wisata</a></li>
    </ul>
  </nav>
</header>

<main>
  <div id="content">
    <pre>Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                        Hahahaha
                    </pre>

  </div>


  <footer>
    <p>FOOTER</p>
  </footer>

Your element has no room to become sticky because its already at the bottom edge of its container.

Related questions:

Why position:sticky is not working when the element is wrapped inside another one?

Why bottom:0 doesn't work with position:sticky?

1From the specification:

The containing block of a static, relative, or sticky box is as defined by its formatting context.

In your case we are inside a Block Formatting Context so

the containing block is formed by the content edge of the nearest block container ancestor box. ref

And

sticky

Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. ref

Temani Afif
  • 245,468
  • 26
  • 309
  • 415