One page Website page specified footer. position: change - html

Question

i am building a one page layout website.
now i would like the class="footer-bar" to be position:absolute on each site, but on the #Home Page it should be position:relative.
does anyone know how to make page specific changes to each page? The Footer should not be written into each page. Only once. Only a css change if i am on page #Home.
thanks for ideas.
<ul>
<li>Home</li>
<li>Home</li>
</ul>
<ul class="tabs-content">
<li id="Home"> Content Page Home </li> ---->Footer position:relative
<li id="Other"> Content Other Page </li> ---->Footer position:absolute
</ul>
<div class="footer">Footer Content</div>

Answer 1

I'm not sure if I get your question, but from what I understand, wouldn't this work:
.footer-bar {
position: absolute;
/* the rest of your styles */
}
.footer-bar#Home {
position: relative;
/* anymore additional styles */
}
EDIT:
Make the #Home in the above css a .Home, and put the below jQuery into the necessary function.
$(".footer-bar").addClass("Home");
Or
$(".footer-bar").css("position","relative");

Answer 2

You're going to have to use something like Jquery to do this I'd imagine.
You'll need a way to identify which tab is active at any given time, so build a click event into your navigation links which will toggle an .active class to your tabs.
You can then query which tab is active, test if it's your 'home' tab, and adjust your css as necessary.
If this is a little muddy I'll whip up a fiddle for you. =)

Answer 3

here is how i did it:
$("#navpoint1, #navpoint2, #navpoint3, #navpoint4").bind("click", function () {
$(".footerbar").css({
position: 'absolute',
bottom: '0'
});
});