From time to time it’s nice to try something different. A typical website layout may have an awesome design but nothing truly creative. Positioning is a vital part to web design. From where you put the navigation menu to the area dedicated to twitter, correct positioning is essential for a good user experience. So, some web designers have taken a step back and thought, I need this area to be permanently displayed but not these other areas. Whilst writing this I find myself wondering why all navigational menus are not permanently displayed. Surely, if you had the ability to go to another page without scrolling, this would lead to much faster browsing?
What are fixed elements?
Fixed elements are sections of a website that stick to the page when you scroll. They are fixed because their position is in relation to the screen rather than the webpage. Take a look at the example below. Mark Jardine successfully demonstrates a fixed section on his website. As you scroll, you notice the left side of the website stays stationary while the content scrolls normally.
Mark Jardine
To have fixed elements or to not have fixed elements?
So why do web designers decide to have these fixed elements? Well there are various reasons why you might want an area or section of website to be visible at all times.
Outlaw Podcasts
- Emphasis. A fixed element is immediately noticed when the user begins to scroll.
- Navigation. Being able to navigate to different pages of a website whilst half way down a page can very useful and improve browsing.
- Advertising. To be certain an advertisement is viewed.
- Displaying latest posts/news. So the reader can instantly view the latest updates.
Use fixed elements wisely...you must.
However, never overuse fixed elements. Too many can spoil your website leaving it harder to read. In fact, in my opinion no more than two should be used. The more fixed elements you have, the less space your website has to breathe. Furthermore, it’s important to pay close attention to the size of the fixed element. A large fixed sidebar may not leave enough room for your content. Always take into account readers with the screen size 1024×768 and how much space they will have available to view your content. Finally, if you plan on having a fixed element that does not hug one of the sides be aware that it may cover up some of your content. This can be very frustrating when reading through a post, especially if there is no way to remove it.
How can I implement a fixed element?
It’s fairly simple to implement fixed elements. The CSS property “position” has a value “fixed” which can position selectors (tags e.g <div></div>) in relation to the screen.
position: fixed;
Fixing an element to the top of the screen
position: fixed; top: 0;
Fixing an element to the left of the screen
position: fixed; left: 0;
Fixing an element 50px from the right of the screen
position: fixed; right: 50px;
Fixing an element 200px from the bottom and 10px from the left of the screen
position: fixed; bottom: 200px; left: 10px;
If you would just like to have a background that doesn’t repeat and stays fixed when you scroll then you can use this css:
background: #fff url(insert-url-here) no-repeat fixed;
An excellent example of a fixed background is Webleeddesign. Bryan combines a fixed background with transparency to create a wonderful effect.
webleeddesign
Further Examples
Grow Media
Total Resistance
Design Comission
Envato
Bulletpr
Stefan Minning
Trend Wolves
Gilbert Pellegrom
Ryan Johnson
cdharrison
Icon Dock
Sean Geng
welcomebrand
Adelle Charles
Further Reading
CSS Fixed Menu – Pinned-Down Style
Creating a Floating HTML Menu Using jQuery and CSS
CSS Floating Menu
How to Add a Fixed Position Banner to a Website
Absolute, Relative, Fixed Positioning: How Do They Differ?
Web Design 101: Positioning
About the author
Share my article
You might also like
Liam is currently a student whereas Alen is an extremely busy excellent logo designer who still has time to bang out a weekly article. Did I mention he made CreativityDen's awesome logo? :)
awesome! webleed is soooooo cool!
Neat post! A site that always think of that has a fixed element is Twitter. The background is fixed!
yeah, great stuff
the webleed design is indeed very cool.
Fixed menu and background image!
http://www.xhtmlmaster.com
Love when ppl use it wisely. I don’t like when i’m trying to read something and there are thins over
To bad position:fixed; alone won’t work on all browsers…
WOW! Amazing post. Love it!
I used to use fixed sidebar on my website, thing is good when the sidebar has a few link in it but when I add some link or content I found that it’s abuse my eyes while reading then I have to remove it :S
I’ve seen a few websites recently that use fixed positioning on the nav bar, adding some important content like RSS feeds or search boxes. This can be very powerful if done right. I recently made a recommendation to a friend to do this on his website and it has worked out great. One of the best applications of this that I’ve seen is David Walsh’s site: http://davidwalsh.name/.
Thanks for the comments guys
Josh, thanks for the great example, adding now!
I like this one http://www.webleeddesign.com/
Very impressive tutorials here. It will help a lot of web designers how to create and build good and professional websites. Interesting website
This was amazing and great inspiration. I really like the work.
Thanks very much people
A word of caution when using fixed onscreen sections. The rise in netbook use, now has many users browsing with relatively low resolutions. Without this consideration, sites could be pretty unusable as content is hidden behind these fixed areas. So always give a way of hiding these sections,
Exactly tommyboy http://blog.creativityden.com/wp-content/uploads/2009/11/cons.jpg