Broadway Project: Why position: fixed instead of position: sticky?

I’m not certain if I did something clever or stupid.

In the “Broadway” project (in the CSS part of the Full-Stack Engineer path) one is asked to mess around with the position and display rules for a bunch of different HTML elements. Part of this involves making sure that the nav at the top stays in one spot, and the instructions accomplish this by using position: fixed

header {
  background-color: #333333;
  position: fixed;
}

The issue this creates is that because the nav element is removed from the flow of the document, it messes a bunch of stuff up and other elements need a lot of annoying positioning and such to fix the appearance of the page. Because we want the nav to move, but we ideally don’t want to mess up the rest of the page by removing the nav from the document’s flow, I thought “Why not use a sticky instead?” and wrote:

header {
  background-color: #333333;
  position:sticky;
  top:0;
}

Which seemed to work well. In fact it worked so well meant I could skip more than half the project: the nav scrolled and the page stayed intact. Resizing the window seemed to work fine too. But now I’m concerned: if this seemingly simpler solution actually works, then why didn’t the project instructions tell us to use it? Basically I’m asking: what are the problems with this solution as opposed to the “position: fixed” solution, and am I setting myself up for failure later by using this apparently easier/faster/better method?

Full CSS and HTML code in case it is needed:

CSS

html, body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333333;
  position:sticky;
  top:0;
}

nav {
  margin: 0;
  padding: 20px 0;
  min-width:400px;
}

nav li {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
  width: 80px;
}

main {
  text-align: center;
}

main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0px;
  padding-top: 80px;
  margin-bottom: 80px;
  text-transform: uppercase;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

.jumbotron {
  height: 800px;
  background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;  
  margin-bottom: 20px;      
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  display:inline-block;
  width:200px;
  height:200px;
  clear:left;

}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.supporting a {
  background-color: white;
  color: #333333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #333333; 
}

@media (max-width: 500px) {
  main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}

HTML:

<!DOCTYPE html>
<html>
  
  <head>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
    <link href='style.css' rel='stylesheet' type='text/css'/>
  </head>

  <body>
    
    <header>
        <nav>
          <ul>
            <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
          </ul>
        </nav>
    </header>

    <main>
      <div class="jumbotron">
        <div class="container">  
          <h1>We are Broadway</h1>
          <a href="#" class="btn-main"> Get Started </a>
        </div>
      </div>
    </main>

    <section class="supporting">
      <div class="container">
        
        <div class="col">
          <img src="https://content.codecademy.com/projects/broadway/design.svg">
          <h2>Design</h2>
          <p>Make your projects look great and interact beautifully.</p>
          <a href="#"> Learn More</a><br>
        </div>
        
        <div class="col">
          <img src="https://content.codecademy.com/projects/broadway/develop.svg">
          <h2>Develop</h2>
          <p>Use modern tools to turn your design into a web site</p>
          <a href="#"> Learn More</a><br>
        </div>
        
        <div class="col">
          <img src="https://content.codecademy.com/projects/broadway/deploy.svg">
          <h2>Deploy</h2>
          <p>Use modern tools to turn your design into a web site</p>
          <a href="#"> Learn More</a><br>
        </div>
        
      </div>
    </section>

    <footer>
      <div class="container">
        <p>&copy; Broadway 2017</p>
      </div>
    </footer>
    
  </body>
</html>

Thank you!

1 Like

Hi there, welcome to the forums!

I just got to this project myself. As far as I can tell, employing your easier/faster/better method didn’t mess anything up, and it doesn’t seem like anyone else has come onto the forums to say that position: sticky; is the wrong move either. Looks like I’m switching to your method!

Btw, at the end of step 10 (the last step), they additionally challenge you to fix the element to the bottom of the page regardless of scrolling. I’m stuck on this part, did you manage to code that?

1 Like

Hi!
Thank you for taking the time to reply to reply to my post. I’m glad to hear that at least one person thinks I didn’t screw up! Maybe I’m onto something, maybe I’m not, but I’m glad my innovation could help someone out.

As to your question, I just spent a few minutes tackling that issue (making the footer fixed–I actually didn’t see that challenge the first time I went through this project!) and initially had trouble trying to offset the footer from the top in such a way that it would respond to different screen sizes. You know, how whenever you do position: fixed or position: sticky you have to have a top: _px rule following it. px is a fixed unit–it doesn’t adapt based on window size, which can easily cause ugliness.

Then I realized that I didn’t have to offset from the top: I could offset from the bottom and it would work just fine too.

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: sticky;
  bottom: 0px ;
}

This worked for me.

1 Like

Yay, awesome, it worked! Updated my code and left myself a little note in there. Thanks!

1 Like