Introduction To Fixed Positioning With CSS
In this tutorial I’m going to talk about using css positioning to improve the web page layout in order to increase the user friendliness. CSS can be used to position html elements where ever we want in the web page. There are 3 kinds of positioning techniques called fixed,absolute and relative. In this tutorial I’m going to use the fixed attribute value of position property to create html elements which are fixed on the given layout.
Normally if we have a web page with long content web browser displays scroll bars to navigate to the content which is not displayed initially. Then if we scroll down, bottom content will be displayed and all the navigation menu bars and content on the top will not be displayed. But Once an element is fixed to the web page no matter how long we scroll, it will stay in the same position as before. Lets move onto creating a fixed positioned element.
Fixed Menus Demo
Before you digg into this tutorial you might want to see a demo to find out exactly what we are going to talk about. Click the link below to watch the demo.
How to Create a Fixed Positioned Element
We can make a html element fixed using the css position attribute. Also to make an element fixed we need to give the at least one coordinate point from top,left,bottom,right. The syntax for making a fixed position element is shown below. In these examples provided below i have used position fixed divs to display the elements in static position on window scroll.
.fixed_elements{
position:fixed;
top:100px;
}
Creating a Fixed Navigation Menu Bar
We can create a simple navigation menu bar using html unordered lists. Once it is fixed to the web page the navigation bar will display on top of the page. Once we start scrolling it will keep its position without hiding. Following code snippet gives you the complete code for creating a navigation menu with ul elements and displaying on top of the page.
CSS lets you position content on your page in a variety of ways, one of which is "fixed". In this mode a piece of content remains completely static without so much as a flinch when the rest of the page is scrolled.
Add more content to div with the id “container” until scroll appears in the web page. Then scroll down and you will see that navigation menu will displayed in a fixed position without affected by scrolling.
Creating a Fixed Footer Bar with CSS and Jquery
We can also create a footer bar like the top navigation bar. Only thing different here is that we have to find the coordinates of the end of document. Since navigation bar is on the top we were able to define the position as “top:0px”. But for the footer bar I’m using jquery to get the coordinates to find the top position for the footer. This kind css floating footers are commonly used in modern web sites.Lets look at the code first.
CSS lets you position content on your page in a variety of ways, CSS lets you position content on your page in a variety of ways, one of which is "fixed".
Common css code is not included in this code. If you are trying this example add the css code from the previous example or use the source files given in the download section.
- First I have called a js function on body onload method.
- We have to get the window height to calculate the top position for the footer.
- Then we have to reduce the footer height from window height.
- In this example footer height is 25px and top and bottom padding of 20px each which makes 65px of total footer height..
- Then we can assign the top value to the footer bar which makes the footer stay on the bottom of the screen on scroll.
Creating a Fixed Side Bar Navigation
Using the css positioning we can create vertical navigation menu to be displayed in the sidebar. This is a very useful feature since users can always navigate to your main pages like home,products,about us,contact us after scrolling. This kind of navigation bars are called floating menu bars and it is a great way to improve traffic to the site.Lets move on to the example code for creating a fixed sidebar with navigation menu.
CSS lets you position content on your page in a variety of ways, one of which is "fixed".
- First I have called a js function on body onload method.
- We have to get the window height to calculate the top position for the sidebar. Since sidebar should be positioned in the center of the browser window
we have to find the coordinates of center. - Then we have divide the window height by 2 and reduce x amount of pixels depending on your menu height.
- Then we can assign the top value to the sidebar bar which makes the sidebar stay on the center of the screen on scroll.
Positioning Fixed Elements on Browser Window Resize
You have seen that we have created a top,footer and left side bar and we had to calculate top position to align the footer and sidebar properly. But think about what will happen if we resize the browser window or change the display resolution. Once we do that both side bar menu and footer will not be displayed in proper position. We can use jquery scroll function as a solution for that. After resizing once we start scrolling we can recalculate the top positions according to the new size of the window and display properly. Its very easy. All you have to do is include the following code inside the set_float_menu() function.
$(window).scroll(function () {
var height = $(window).height();
var top_start = (height/2) - 100;
$('#menu-bar').css('top', top_start+"px");
$('#footer-bar').css('top', (height-65)+"px");
});
Now resize or change the resolution of browser window. Sidebar will not position properly and footer will get hidden. Then start scrolling and you will see the sidebar aligning properly and footer is displayed in the bottom again.
Fixed Position Examples Download
Download EBook Version
Download
Leave a Reply