Fixed elements in web design with examples

Sticky!

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

1. Emphasis. A fixed element is immediately noticed when the user begins to scroll.
2. Navigation. Being able to navigate to different pages of a website whilst half way down a page can very useful and improve browsing.
3. Advertising. To be certain an advertisement is viewed.
4. 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

  

Written by Liam McCabe

The almighty creator of CreativityDen. Absolutely loves design and messing around with wordpress.