JSFiddle - React, Tailwind, and code Playground

by shekyb

HTML

<div class="wrapper">
    <div class="background">
        <div class="image"></div>
         <h1>Title</h1>
    </div>
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a laoreet ligula, vel iaculis lectus. Cras nec mauris sollicitudin, bibendum magna et, pulvinar lacus. Donec vel mauris at sem viverra ullamcorper. Duis vehicula justo sem, eget porta dolor molestie sed. Duis orci orci, aliquam nec nisl id, luctus ornare purus. Vivamus vitae venenatis eros, ut tempus nulla. Donec quam erat, vestibulum a mollis eu, gravida quis mi. Vestibulum tristique consectetur ex ac tincidunt. Morbi rutrum blandit dui vitae maximus. Quisque mollis dolor a pellentesque convallis. Fusce commodo est vel ultricies tristique. Duis ut libero tristique, egestas elit quis, iaculis nunc.
        </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a laoreet ligula, vel iaculis lectus. Cras nec mauris sollicitudin, bibendum magna et, pulvinar lacus. Donec vel mauris at sem viverra ullamcorper. Duis vehicula justo sem, eget porta dolor molestie sed. Duis orci orci, aliquam nec nisl id, luctus ornare purus. Vivamus vitae venenatis eros, ut tempus nulla. Donec quam erat, vestibulum a mollis eu, gravida quis mi. Vestibulum tristique consectetur ex ac tincidunt. Morbi rutrum blandit dui vitae maximus. Quisque mollis dolor a pellentesque convallis. Fusce commodo est vel ultricies tristique. Duis ut libero tristique, egestas elit quis, iaculis nunc.
        </p>
    </div>
</div>

CSS

.wrapper {
    width: 500px;
    margin: 0 auto;
}
.image {
    background-image: url('https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpf1/t1.0-9/1970856_10152030148361239_1864148173_n.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 300px;
}

.backgorund {
    height: 200px;
    width: 100%;
}

h1,p {
    margin: 0;
}

.background h1 {
    position: fixed;
    top: 170px;
}

.content {
}

JavaScript

$(window).on('scroll', function(){
    if($(window).scrollTop() > 110) {
        $('.background h1').css({'position': 'relative', 'top': '0'});
    } else {
         $('.background h1').css({'position': 'fixed', 'top': '170px'});
    }
});