JSFiddle - React, Tailwind, and code Playground

by Julia Will

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="padding"></div>
    <div class="anchor"></div>
</div>

<div class="wrap">
    <div class="container sticky">
    <div class="row">
        <div class="col-sm-6">
            Testing
        </div>
        <div class="col-sm-6">
            Testing
        </div>
    </div>
</div>
</div>

<div>
    <div class="padding2"></div>
</div>

CSS

.padding {
    height:250px;
}
.padding2 {
    height:1000px;
}
.sticky {
    background:#000;
    height:50px;
    line-height:50px;
    color:#fff;
    font-weight:bold;
}

.wrap {
    width: 100%;
}
    .wrap.stick {
        position:fixed;
        top:0;
        z-index:10000;        
    }

JavaScript

function stickyDiv() {
    var top = $(window).scrollTop();
    var divTop = $('.anchor').offset().top;
    if (top > divTop) {
        $('.wrap').addClass('stick');
    } else {
        $('.wrap').removeClass('stick');
    }
}

$(window).scroll(function(){ 
    stickyDiv();
});
stickyDiv();