Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Add a Sticky Navigation Bar Adding Sticky Navigation

Filippo D'Arrigo
Filippo D'Arrigo
5,285 Points
Posted by Filippo D'Arrigo
Filippo D'Arrigo
5,285 Points

Sticky Header

Hi everyone, I found myself struggling a little bit as the content would overrun the header when I scroll down the page. Other than set the header's background-color to white, I added this to my header { z-index: 9999 } and got my page to work. Is this a common practice or there are other ways to work this out?

Julian Gutierrez
Julian Gutierrez
19,201 Points
Julian Gutierrez
Julian Gutierrez
19,201 Points

What browser were you using if you don't mind me asking?

Tobias Kristensen
Tobias Kristensen
9,226 Points
Tobias Kristensen
Tobias Kristensen
9,226 Points

Hi. z-index controls layers. So what you have done is set your header to layer 9999, while the rest of your content is in the first layer. If you change your z-index to 2 it should still work. Personally I like to use layers, so for me they are common practise. Just remember to choose reasonable numbers for your layers or else you will have a hard time remembering what layers the different elements are in.

Best regards -Tobias

3 Answers

Samuel Custer
Samuel Custer
2,683 Points
Samuel Custer
Samuel Custer
2,683 Points

Use increments of 10 for your layers as a best practice that way you can easily add specific layers in the future. Also when you learn LESS or SCSS you can have all your z-indexes in one file stored as variables for super easy z-index management.

Regards,

Samuel

https://samcus.co

Filippo D'Arrigo
Filippo D'Arrigo
5,285 Points
Filippo D'Arrigo
Filippo D'Arrigo
5,285 Points

@Samule Custer: I don't have a clue about LESS and SCSS but I will definitely start the basic SASS course here on Treehouse @Julian Gutierrez I tried on Firefox 39.0 and Chrome 65.143.49221.
@Tobias Kristensen: For the rest of the content, you mean everything inside an hypothetical main container? I am asking because I read that z-index only applies to positioned elements so I guess it wouldn't apply to the body element. Here's my example anyway:

<div class="main-container">
  <header id="main-header">

  </header>
  <div class="main-content">

  </div>
</div>

body {
background-color: #f4f4f4;
}


.main-container {
width: 100%;
}

 header {
  background-color:white;
  z-index:2;
}

.main-content {
  width:90%;
}
Cesare Parmiggiani
Cesare Parmiggiani
8,017 Points
Cesare Parmiggiani
Cesare Parmiggiani
8,017 Points

I got the same problem.

But I'm not able to fix it!

My HEADER always "go behind" the content page, I even tried with z-index but nothing to do :

HTML:

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <title>test</title> <link rel="stylesheet" href="dist/css/animsition.min.css"> <link rel="stylesheet" href="style.css" /> </head> <body> <header id="header" class="header"> <h1> HEADER </h1> </header> <div id="container" class="animsition"> <div id="nav"> <ul> <li>Cesare </li> <li>Parmiggiani </li>

</ul> </div>

<div id="body"> <p>the content</br> lorem ipsum dolor ament lorem ipsum dolor ament</p></div> <div id="body2"> <p>the content </p></div>

<div id="test" class="animsition"> <a href="page2.html" class="animsition-link"> colophon </a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.sticky.js"></script> <script src="dist/js/animsition.min.js"></script> <script src="main.js"></script> </body> </html>

CSS:

@charset "UTF-8";

.header{ background-color: #ada; width: 100%; height: 50px; text-align: center; margin: auto; font-family: arial; position: relative; z-index: 9999; } .container { z-index: 1; }

body{

background-color: orange; width: 35%; height: 1000px; float: left; position: relative; text-align: center; margin: auto; }

body2{

background-color: pink; width: 40%; height: 1000px; float: left; position: relative; text-align: center; margin: auto; background-image: url("http://imgview.info/download/20150430/city-background-hd-1600x1000.jpg"); background-position: center; }

body3{

background-color: indigo; width: 40%; height: 1000px; float: left; position: relative; text-align: center; margin: auto; background-position: center; }

li{ font-family: arial; }

p{ color: blue; text-align: center; margin: auto; font-family: arial; }

nav{

background-color: blue; width: 25%; height: 500px; float: left; position: relative; color: #fff; height: 1000px; }

test{

background: red; width: 100%; height: 50px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; position: relative; clear: left; }

.colophon{ float: right; margin: 10px 10px; }

a{ }

/* Media Query */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { #nav{ background-color: indigo; width: 100%; height: auto; clear: left; position:relative; }

#body{ background-color: orange; width: 50%; height: 500px; float: left; position: relative; text-align: center; margin: auto; }

#body2{ background-color: pink; width: 50%; height: 500px; float: left; position: relative; text-align: center; margin: auto; } }

mainjs: $("header").sticky();

$(document).ready(function() { $(".animsition").animsition({ inClass: 'fade-in-down', outClass: 'fade-out-down', inDuration: 1500, outDuration: 800, linkElement: '.animsition-link', // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])' loading: true, loadingParentElement: 'body', //animsition wrapper element loadingClass: 'animsition-loading', loadingInner: '', // e.g '<img src="loading.svg" />' timeout: false, timeoutCountdown: 5000, onLoadEvent: true, browser: [ 'animation-duration', '-webkit-animation-duration'], // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser. // The default setting is to disable the "animsition" in a browser that does not support "animation-duration". overlay : false, overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body', transition: function(url){ window.location.href = url; } }); });