Fixed Header, Scrolling Content

In this blog post I'm going to be taking you through the process in which I did to get my fixed header, behind the front scrolling content.

Considering everything with what I wanted to do had something to do with positioning I knew that the position and display tags would be imperative to its success.

For my background image I found this code online:

Essentially it makes the body tag have a background of a specific url, that wont repeat and will be centered horizontally, and centered vertically and it will be fixed. (wont move when scroll). The height 100% and width 100% make it take up the entire body.

Next was the title to center something and have it in a position of your pleasing is a little tricky when dealing with an element that has to be fixed.

The title was an h1 inside a div called .header:

I gave it a fixed position with a top of 150px this pushed it down slightly, I then text align centered it and it was in the right position!

The additional code just set the font family and the color of the font and the z-index which I will explain shortly.





Here is the h1 that was also influencing the title I spread out the kerning and also set the font weight, (light) and the line height, otherwise the text was on-top of each other making it unreadable!

So far it looked pretty good but I still needed to sort out the scroll that I specifically want.

Centered Title with H1 styling

So the next step for me was to get the content in place so I could see if the scroll actually worked, for this I just created a div called .content-title. which I knew my introduction was going to go in, I made this 100% height and gave it a background color of grey (#F2F2F2). This just gave me something to scroll infront of the home page to see if my scroll effect was working. and here's what happened:

As you can see the title font does scroll down, however it goes in font of the content title div that I put in place, this left me stumped for a long time, I messed around with different positions and displays but had no luck, so I googled for solutions and after a while I found that a the z-index class was used in these situations to create a 'layered' effect on your webpage whereby you could put certain things in front of others, so immediately I went over to w3 schools and found their page on it - http://www.w3schools.com/cssref/pr_pos_z-index.asp

This really helped, I simply applied a z-index class to the title, and the background of a lower value than the z-index I gave the content, this made sure that it would go behind in the situation of a clash, as a result I then had to make sure that everything I was giving a 'layer position' as it were, had the definition of either a fixed, absolute or relative as the z-index can only take effect when they are under those parameters.