Modernizr Test

HTML

<html>
    
    <head>
        <script src="https://www.modernizr.com/downloads/modernizr-latest.js"></script>
    </head>
    
    <body>
        <h1>Modernizr Test</h1>           
       
        <h2>First header</h2>
        
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        
        <div id="test" class="advert advert-fixed">Fixed layer with bottom: 0, width: 100%, and height: 100px</div>
        
        <div class="advert advert-static">Absolute layer with bottom: 0, width: 100%, and height: 50px</div>
        
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        <h2>Normal text</h2>
        
        <h2>Last header</h2>
        
    </body>

</html>

CSS

/* common styles for all adverts */
.advert {
    width: 100%;
    border: solid blue 3px;
}

/* styles specific to inline-only adverts */
.advert-static {
    background-color: yellow;
    height: 50px;
    bottom: 0;
    left: 0;
    position: static;
}

/* styles specific to fixed adverts + additional default fallback positioning in case fixed is unavailable */
.advert-fixed {        
    background-color: red;
    color: white;
    height: 100px;
    
    /* this gets overrided below if position:fixed is available */
    position: static;
    bottom: 0;
    left: 0;
}

/* desired behavior to fix the position of fixed adverts if possible */
.positionfixed .advert-fixed {
    position: fixed;
    border-color: green;
}

JavaScript

// Test for position:fixed support
console.log(Modernizr.prefixed( 'transition' ));

Modernizr.addTest('positionfixed', function () {
    var test  = document.createElement('div'),
      control = test.cloneNode(false),
         fake = false,
         root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
      }());

   var oldCssText = root.style.cssText;
   root.style.cssText = 'padding:0;margin:0';
   test.style.cssText = 'position:fixed;top:42px';
   root.appendChild(test);
   root.appendChild(control);
   
   var ret = test.offsetTop !== control.offsetTop;
   
   root.removeChild(test);
   root.removeChild(control);
   root.style.cssText = oldCssText;
   
   if (fake) {
      document.documentElement.removeChild(root);
   }
   
   return ret;
});