<div class="header"><p>header</p></div>
<div class="wrapper">
  <h2 class="sub">jQuery.Pin</h2>
  <section class="js-pin-container">
    <div class="row">
      <div class="left-col">
        <div class="js-pin-content">
          <img src="http://placehold.it/250x250">
        </div>
      </div>
      <div class="right-col">
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab 1</a></li>
    <li><a href="#tabs-2">tab 2</a></li>
    <li><a href="#tabs-3">tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p style="background: silver; height: 900px;">This dive is 900px tall.</p>
  </div>
  <div id="tabs-2">
    <p style="background: silver; height: 600px;">This dive is 600px tall.</p>
  </div>
  <div id="tabs-3">
    <p style="background: silver; height: 1200px;">This dive is 1200px tall.</p>
  </div>
</div>
      </div>
    </div>
  </section>
  <br style="width: 100%; float: left; clear: both;" />
</div>
<footer>
  <p>footer</p>
</footer>
.header {
  width: 100%;
  height: 70px;
  background: #f3f3f3;
  float: left;
}

.wrapper {
  width: 700px;
  margin: auto;
  clear: both;
}

.js-pin-container {
  width: 700px;
  margin: auto;
  border: 1px solid silver;
  float: left;
}

.js-pin-content {
  height: 250px;
}

.left-col {
  width: 250px;
  min-height: 200px;
  float: left;
}

.right-col {
  width: 400px;
  min-height: 200px;
  float: right;
}

.ui-tabs {
  float: left;
  width: 100%;
}

footer {
  width: 100%;
  height: 900px;
  background: #f3f3f3;
  float: left;
  clear: both;
}
(function ($) {
    "use strict";
    $.fn.pin = function (options) {
        var scrollY = 0, elements = [], disabled = false, $window = $(window);

        options = options || {};

        var recalculateLimits = function () {
            for (var i=0, len=elements.length; i<len; i++) {
                var $this = elements[i];

                var $container = options.containerSelector ? $this.closest(options.containerSelector) : $(document.body);
                var offset = $this.offset();
                var containerOffset = $container.offset();
                var parentOffset = $this.offsetParent().offset();

                var pad = $.extend({
                  top: 0,
                  bottom: 0
                }, options.padding || {});

                $this.data("pin", {
                    pad: pad,
                    from: (options.containerSelector ? containerOffset.top : offset.top) - pad.top,
                    to: containerOffset.top + $container.height() - $this.outerHeight() - pad.bottom,
                    end: containerOffset.top + $container.height(),
                    parentTop: parentOffset.top
                });

                $this.css({width: $this.outerWidth()});
                $this.parent().css("height", $this.outerHeight());
            }
        };

        var onScroll = function () {
            if (disabled) { return; }

            scrollY = $window.scrollTop();

            var elmts = [];
            for (var i=0, len=elements.length; i<len; i++) {          
                var $this = $(elements[i]),
                    data  = $this.data("pin");

                if (!data) { // Removed element
                  continue;
                }

                elmts.push($this); 
                  
                var from = data.from - data.pad.bottom,
                    to = data.to - data.pad.top;
              
                if (from + $this.outerHeight() > data.end) {
                    $this.css('position', '');
                    continue;
                }
              
                if (from < scrollY && to > scrollY) {
                    !($this.css("position") == "fixed") && $this.css({
                        left: $this.offset().left,
                        top: data.pad.top
                    }).css("position", "fixed");
                    if (options.activeClass) { $this.addClass(options.activeClass); }
                } else if (scrollY >= to) {
                    $this.css({
                        left: "",
                        top: to - data.parentTop + data.pad.top
                    }).css("position", "absolute");
                    if (options.activeClass) { $this.addClass(options.activeClass); }
                } else {
                    $this.css({position: "", top: "", left: ""});
                    if (options.activeClass) { $this.removeClass(options.activeClass); }
                }
          }
          elements = elmts;
        };

        var update = function () { recalculateLimits(); onScroll(); };

        this.each(function () {
            var $this = $(this), 
                data  = $(this).data('pin') || {};

            if (data && data.update) { return; }
            elements.push($this);
            $("img", this).one("load", recalculateLimits);
            data.update = update;
            $(this).data('pin', data);
        });

        $window.scroll(onScroll);
        $window.resize(function () { recalculateLimits(); });
        recalculateLimits();
        this.recalculateLimits = recalculateLimits;
        $window.load(update);

        return this;
      };
})(jQuery);

$(function() {

    //Attach pin:
    var pinSide = $(".js-pin-content").pin({
      containerSelector: ".js-pin-container"
    });
  	//Create tabs:
    $( "#tabs" ).tabs({
      	activate:function(){
      		pinSide.recalculateLimits();
        }
    });
  
});