JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div id="annonse1" class="ad"></div>
<div id="annonse2" class="ad"></div>

<div id="innhold">
    <h1>INNHOLD</h1>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
    <p>Her kommer innholdet?</p>
</div>

CSS

#annonse1, #annonse2 {
    position:absolute; 
    height: 600px; 
    width: 160px; 
    top: 100px;
    background: url(http://www.google.com/help/hc/images/adsense/adsense_185665_adformat-text_160x600_en.png);
}
#annonse1 {right: 70px;}
#annonse2 {left: 70px;}

#innhold {position: relative; width: 400px; height: 1600px; margin: 20px auto; background: cyan;}
#innhold h1 {font-size: 20px; font-weight: bolder; text-align: center; margin: 0 0 20px 0;}
#innhold p {font-size: 15px; font-weight: bold; text-align: center; margin: 0 0 100px 0;}

JavaScript

$(document).ready(function() {
    var ads = $(".ad"),
        adTop = $("#annonse1").offset().top;
    
    $(window).scroll(function() {
        var T = $(this).scrollTop();
        if (T>adTop) {
            ads.css({position : 'fixed', top: 0});
        }else{
            ads.css({position : 'absolute', top: adTop});
        }
    });
});