Nsokyi Nsokyi - 4 months ago 5
CSS Question

Change CSS that's attached to the HTML tag depending on the page?

So I have a Homepage that uses Scrollmagic.js to scroll up and down the page and that requires the HTML tag to be relatively untouched. On every other page I need the HTML tag to have a height of 100% or the sticky footer CSS won't work but if I add 100% height to the homepage, then no scrolling. So is there a way in either CSS or jQuery that can change HTML height depending on which page the user is on?

or is there a sticky footer method out there that doesn't use a height of 100% on the HTLM tag like:

html, body {
height: 100%;
}


thanks

Answer

You could use the URL to check which page you are on, and adjust the CSS according to the page.

JavaScript

window.onload = function() {
    var url = window.location.href;
    var pageurl = url.substring(url.indexOf('.com')+4,url.length);
    var html = document.querySelector('html');

    if(pageurl !== "/index.html") {
      /* adjust css if we're not on the index.html page */
      html.style.width = "100%";

    }
}