JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div>
                <h2>
                    Products</h2>
            </div>
            <section id="C2007" data-type="background" data-speed="10">
                <h3>
                    2007</h3>
                <div class="row-fluid">
                    <article>
                        The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. 
                        At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. 
                        This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide.  The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. 
                    </article>
                </div>
            </section>
            <br />
            <section id="C2008" data-type="background" data-speed="10">
                <h3>
                    2008</h3>
                <div class="row-fluid">
                    <article>
                        The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. 
                        At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of...

CSS

#C2007 { 
  background: url(http://www.driveculture.com/wp-content/uploads/2010/06/test-banner.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
#C2007 article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}
#C2008 { 
  background: url(http://www.mytestsandbox.com/images/bannerTestPage.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
 #C2008 article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}
#C2009 { 
  background: url(http://www.driveculture.com/wp-content/uploads/2010/06/test-banner.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
#C2009 article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}
#C2010 { 
  background: url(http://www.mytestsandbox.com/images/bannerTestPage.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
#C2010 article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}
#C2011 { 
  background: url(http://www.driveculture.com/wp-content/uploads/2010/06/test-banner.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
#C2011 article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}
#C2012 { 
  background: url(http://www.mytestsandbox.com/images/bannerTestPage.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
#C2012 article {...

JavaScript

$(document).ready(function () {
            $('section[data-type="background"]').each(function () {
                var $bgobj = $(this); // assigning the object

                $(window).scroll(function () {
                    var yPos = -($(window).scrollTop() / $bgobj.data('speed'));

                    // Put together our final background position
                    var coords = '50% ' + yPos + 'px';

                    // Move the background
                    $bgobj.css({ backgroundPosition: coords });
                });
            });
        });