JSFiddle - React, Tailwind, and code Playground

by Tasos Karagiannis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<div class="container">
  <div class="row maincontent">
    <div class="col-md-6 col-sm-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis erat et nisi malesuada convallis. Duis tincidunt laoreet felis in dictum. Duis cursus pretium lobortis.</p>
    </div>
    <div class="col-md-6 col-sm-6  hidden-sm">
      <p>
        Pellentesque ac massa sit amet ex viverra vehicula. Maecenas eros neque, rutrum et vehicula ut, venenatis ut leo. Nullam ex risus, aliquam quis sollicitudin nec, accumsan nec ante. Quisque vehicula ipsum in nunc malesuada pretium. Praesent libero libero,
        interdum sit amet neque et, finibus posuere diam. Nam efficitur a est eget pulvinar. Quisque euismod, libero non finibus eleifend, ipsum risus aliquet tortor, vel elementum augue purus et est. Phasellus vitae placerat metus. Ut justo lectus, viverra
        sed egestas quis, viverra vitae ligula. Nulla rutrum ac nibh in ornare. Aenean tincidunt, sapien eget sagittis aliquam, ipsum lectus ornare elit, a rutrum dolor metus eu lacus. Quisque fermentum orci pulvinar orci feugiat dapibus. Duis eget ante
        mattis, rhoncus nulla eu, vehicula purus.
      </p>
      <p>
        Pellentesque ac massa sit amet ex viverra vehicula. Maecenas eros neque, rutrum et vehicula ut, venenatis ut leo. Nullam ex risus, aliquam quis sollicitudin nec, accumsan nec ante. Quisque vehicula ipsum in nunc malesuada pretium. Praesent libero libero,
        interdum sit amet neque et, finibus posuere diam. Nam efficitur a est eget pulvinar. Quisque euismod, libero non finibus eleifend, ipsum risus aliquet tortor, vel elementum augue purus et est. Phasellus vitae placerat metus. Ut justo lectus, viverra
        sed egestas quis, viverra vitae ligula. Nulla rutrum ac nibh in ornare. Aenean...

CSS

/*
 Based on the documentation
 you must provide CSS for the positioning and width of your affixed content.
*/

.affix {
  top: 40px;
  /* This is the desired offset where the affixed div will appear */
  width: 100%;
  /* This is the desired width where the affixed div will have */
}

JavaScript

$.initAffix = function() {
  $('#myAffix').affix({
    offset: {
      top: function() {
        console.log('Offset top from: ' + $('.navbar').offset().top);
        return (this.top = $('.navbar').offset().top);
      }
    }
  });
};

$.resetAffix = function() {
  console.log('resetAffix');
  $(window).off('.affix');
  $('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
  $.initAffix();
};

$(window).on('resize', $.resetAffix);

$.initAffix();