Allowing content to scroll smoothly with the parent container.

betterScrollingDivs.md

Better Scrolling Div

This code utilises a Div to scroll alongside a larger sibling element until it reaches the bottom and then stick there.

this requires jquery.matchHeight: https://github.com/liabru/jquery-match-height

scroller.js

if($(window).width() > 880) {
  $(window).load(function() {

    // Make sure floated container has a height that matches image
    $('.match-child-heights > div').matchHeight();

    // Set explicit width for fixed element
    function setParentWidth() {
      $('.summary').width($('.summary').parent().outerWidth());
    }
    
    setParentWidth();
    
    $(window).resize(function() {
      setParentWidth();
    });

    var spaceTop = 70;
    var paddingTop = 30;
    $(window).scroll(function() {
      if($(window).width() > 880) {
        var parentEl = $('.sticky-container');
        var stickyEl = $('.summary');
        var parentElTop = parentEl.offset().top;
        var parentElBot = parentElTop + parentEl.height() - stickyEl.height();
        var totalOffset = spaceTop + paddingTop;
        if(($(window).scrollTop() > parentElTop - spaceTop) && ($(window).scrollTop() < parentElBot - totalOffset)) {
          stickyEl.addClass('sticky-fixed');
          stickyEl.removeClass('sticky-bottom');
        } else if ($(window).scrollTop() > parentElBot - totalOffset) {
          stickyEl.removeClass('sticky-fixed');
          stickyEl.addClass('sticky-bottom');
        } else {
          stickyEl.removeClass('sticky-bottom');
          stickyEl.removeClass('sticky-fixed');
        }
      }
    });
  });
}

$(window).resize(function() {
  if($(window).width() < 880) {
    $('.summary').removeClass('sticky-bottom sticky-fixed');
  }
});

scroller.php

<div class="row match-child-heights">
    <div class="images">
        <img src="placehold.it/600/1000">
        <img src="placehold.it/600/1000">
        <img src="placehold.it/600/1000">
        <img src="placehold.it/600/1000">
    </div>

    <div class="sticky-container">
        <div class="summary">
			<!-- ///// content here to scroll-->
        </div>
    </div>
</div>

scroller.scss

 .images {
    width: 60%;
 }
 
 .sticky-container {
    position: relative;

    @include media(min-width 880px) {
        float: left;
        width: 30%;
        margin-left: 5%;
    }
    
    .sticky-fixed {
        position: fixed;
        top: 70px; // match to spaceTop in js
    }
    
    .sticky-bottom {
        position: absolute;
        top: auto;
        bottom: 0;
    }
}