FixedPosition > a jQuery Plugin

What is Position: Fixed?

It’s a powerful CSS attribute, that allows you to fix a HTML element to a position on the page, irrespective of user interaction. Put simply, if the user scrolls, it stays put.

FixedPosition doesn’t jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8 … about time huh.

What’s the Problem

As web developers (now let’s be honest), we face an interesting challenge when it comes to CSS and Internet Explorer. Did you know that IE7 & 8 only support fixed positioning when using a strict doctype? Quirks Mode still remains IE8’s default, meaning that we still need a graceful way of using this CSS gem.

Am I picking on IE?

Nah. I’m a big advocate for your right to choose a platform, device and browser. Heck, just read my article on Progressive Enhancement. This plug-in is all about delivering a consistent user experience (no matter the browser). It’s also about providing another tool to the cohort of web developers ( hi there ) to help make our career easier. Don’t forget, web development is considered the most hostile environment to develop software for..

How can we solve it?

Through a blend of CSS and JavaScript, we can gracefully achieve this functionality. That’s what this plug-in is all about.

Plug-in Features

• Uses jQuery, a framework you already know
• Support for IE6, 7 & 8
• Integrates the IE Speed Fix to ensure a fluent user experience
• It check for capability, not user-agent
• Supports Standard and Quirks mode
• Progressively Enhances your webpage

How to use it

1. Download the jQuery framework
2. Download the FixedPosition plug-in
3. Observe the below example code

Example Code

<!--[if GTE IE 6]><!-->

<!-- The jQuery Framework -->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<!-- The FixedPosition plugin -->

<script src="jquery.fixedposition.1.0.0-min.js"></script>

<!-- Call the plugin on your jQuery object when the DOM is ready -->
<script>
  $(document).ready(function(){
     $(".fixedbar").fixedPosition({
        debug: true,
        fixedTo: "bottom",
        effect: "slideDown",
        effectSpeed: 200
     });
  });
</script>

<!--<![endif]-->;