Webistrate - Draw Your Own Conclusions

CSS: Fixed Position Content

Posted by Jamie Munro | October 3, 2011 | Tags: ,

Share

I truly believe that Facebook is attempting to shape the Internet.  Every time a changed is made, there is always massive uproar – both positive and negative.  A recent change that I noticed was how they began using previously “unused” content spacing.  This is done intelligently and only when you have a screen resolution greater than 1280 pixels wide.  It’s an extremely simple process to add using the most basic CSS and some basic jQuery resize detection.

There are a few complexities to this process.  Firstly, the user’s browser resolution must be detected – both onload and on resize.  Based on their resolution, the fixed position element might behave differently.  For your example, if you have the design space it doesn’t need to, but in this example I plan to use up the “extra” space I have available on either the right or left side of the content only for my users that have the resolution to support it.

If your browser width is 1280 pixels or wider, look in the top right corner, there should be a new callout box that will always “live” in that exact position even if you scroll down the page to read the content.  If your browser width is less than 1280 pixels – sorry, you will just need to imagine it.

To not keep you waiting, let’s jump right into the full solution including the Javascript that will remove this element when the browser width requirements are not met.

<!DOCTYPE html>
<html>
<head>
<title>Fixed Position Example</title>

<style type="text/css">
#fixed {
position: fixed;
right: 0;
top: 20px;
width: 250px;
}
</style>
</head>
<body>
<div id="container">
<header>
<!-- Place header/logo and what-not here -->
</header>

<nav>
<!-- Place nav here -->
</nav>

<article>
<!-- Place main content here -->
</article>

<aside>
<!-- Place ads and what-not here -->
</aside>

<div id="fixed">
<!-- Place the fixed content here -->
</div>

<footer><!-- Place footer content here --></footer>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).ready(function() {
checkFixed();
});

$(window).resize(function() {
checkFixed();
});

function checkFixed() {
// get the browser width
var width = $(window).width();

// if it's greater than 1280, ensure fixed is showing
if (width >= 1280) {
$('#fixed').show();
}
// else hide it
else {
$('#fixed').hide();
}
}
</script>
</body>
</html>

Yes, I was surprised as well as to how much easier this was then I thought!  Really, position: fixed, we are done.  Then a little jQuery to show/hide the element based on the browser width.

Summary

With the magic of position: fixed you and keep an element exactly where you tell it.  Be warned that this element is “removed” from the regular flow so other content will overlap it – so be sure this is taken into account when you design your fixed position element.

Share


Related Posts

Leave a Reply

You must be logged in to post a comment.

Buy one of my books