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><a href="#Home">Home</a></li>
<li><a href="#Other">Home</a></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");