Coding a website JavaScript disabled

Approxiately 2% of people worldwide are using browsers that don't have JavaScript, or they have it turned off. (Reference) So not a big number, but it's there.

This is where progressive enhancement is your friend. Try to create a status bar that does what you want (probably using position: fixed or position: absolute combined with some padding on your main content element) on most browsers, most of the time, without JavaScript. Then if you still think you need to use JavaScript for it to do exactly what you want, you can add that for the 98% of people who have it.

Your site should still work for people who do not have JavaScript enabled, but it should work better for those that do have JavaScript enabled, and you should let users know that they aren't getting the best user experience because they don't have JavaScript enabled.

This is what Google, Facebook, and Yahoo do, and is the best way to reach the widest audience.

http://en.wikipedia.org/wiki/Progressive_enhancement

It looks like you just want CSS, especially position: fixed; bottom: 0: http://jsfiddle.net/b6qwH/.

That way the element is anchored to the bottom of the screen, so also when scrolling.

A sticky header should not need javascript anyway, you can do it just with position:fixed for example movethewebforward.org

JavaScript is almost on on every browser. I think 90% of you visiters don't even know you can switch it off. And the other 10% know why you shouldn't turn JavaScript off.

You can search for sticky footer or sticky header and you are getting much examples about how you can do something as this.

Thanks for all the good advice. I was able to use CSS to achive my goal and eliminate javascript. At least it works in the few browsers that I tested it with. The emptyspace class creates a margin between the content and footer. Coding CSS is not fun in my opinion.

#emptyspace {
    float: left;
    width: 100%;
    height: 130px;
}

#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 125px;
    background: url(../images/grass-green-gradient.png);
    background-repeat: repeat-x;
}