Sticky in the box

index.html

<header class="header js-header">
   <nav class="nav nav-centered">
      <a class="nav__link" href="">link</a>
      <a class="nav__link" href="">link</a>
      <a class="nav__link" href="">link</a>
   </nav>
</header>

<div class="wrapper">
   <main class="main js-main">
      <div class="content js-sticky-from">
         <p>Obcaecati, autem aliquam ipsam modi consectetur harum libero repellat fuga provident, corporis numquam quo suscipit neque hic dolor facilis, assumenda natus illum unde architecto! Sed?</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatum maxime explicabo voluptates corporis voluptas quidem aut quibusdam alias optio nam, omnis velit voluptate quaerat?</p>
         <p>Sed sit voluptatem molestias aspernatur soluta voluptatibus sapiente minus voluptatum consequuntur aliquid natus error aliquam ipsum delectus libero, voluptate doloremque nemo. Eveniet, ad quae ipsam?</p>
         <p>Cum obcaecati consequuntur explicabo minima quibusdam aut unde consequatur impedit nesciunt velit voluptatum vel doloribus repellat ipsa laudantium expedita illo nemo quaerat, dolorum, totam amet!</p>
         <p>Quaerat pariatur a ut deserunt dicta ullam error, enim quis illum corporis dolorem, porro temporibus iure aut eveniet deleniti harum animi culpa iste similique odit!</p>
         <p>Obcaecati, autem aliquam ipsam modi consectetur harum libero repellat fuga provident, corporis numquam quo suscipit neque hic dolor facilis, assumenda natus illum unde architecto! Sed?</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatum maxime explicabo voluptates corporis voluptas quidem aut quibusdam alias optio nam, omnis velit voluptate quaerat?</p>
         <p>Sed sit voluptatem molestias aspernatur soluta voluptatibus sapiente minus voluptatum consequuntur aliquid natus error aliquam ipsum delectus libero, voluptate doloremque nemo. Eveniet, ad quae ipsam?</p>
         <p>Cum obcaecati consequuntur explicabo minima quibusdam aut unde consequatur impedit nesciunt velit voluptatum vel doloribus repellat ipsa laudantium expedita illo nemo quaerat, dolorum, totam amet!</p>
         <p>Quaerat pariatur a ut deserunt dicta ullam error, enim quis illum corporis dolorem, porro temporibus iure aut eveniet deleniti harum animi culpa iste similique odit!</p>
         <p>Obcaecati, autem aliquam ipsam modi consectetur harum libero repellat fuga provident, corporis numquam quo suscipit neque hic dolor facilis, assumenda natus illum unde architecto! Sed?</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatum maxime explicabo voluptates corporis voluptas quidem aut quibusdam alias optio nam, omnis velit voluptate quaerat?</p>
         <p>Sed sit voluptatem molestias aspernatur soluta voluptatibus sapiente minus voluptatum consequuntur aliquid natus error aliquam ipsum delectus libero, voluptate doloremque nemo. Eveniet, ad quae ipsam?</p>
         <p>Cum obcaecati consequuntur explicabo minima quibusdam aut unde consequatur impedit nesciunt velit voluptatum vel doloribus repellat ipsa laudantium expedita illo nemo quaerat, dolorum, totam amet!</p>
         <p>Quaerat pariatur a ut deserunt dicta ullam error, enim quis illum corporis dolorem, porro temporibus iure aut eveniet deleniti harum animi culpa iste similique odit!</p>
         <p>Obcaecati, autem aliquam ipsam modi consectetur harum libero repellat fuga provident, corporis numquam quo suscipit neque hic dolor facilis, assumenda natus illum unde architecto! Sed?</p>
      </div>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatum maxime explicabo voluptates corporis voluptas quidem aut quibusdam alias optio nam, omnis velit voluptate quaerat?</p>
         <p>Sed sit voluptatem molestias aspernatur soluta voluptatibus sapiente minus voluptatum consequuntur aliquid natus error aliquam ipsum delectus libero, voluptate doloremque nemo. Eveniet, ad quae ipsam?</p>
         <p>Cum obcaecati consequuntur explicabo minima quibusdam aut unde consequatur impedit nesciunt velit voluptatum vel doloribus repellat ipsa laudantium expedita illo nemo quaerat, dolorum, totam amet!</p>
         <p>Quaerat pariatur a ut deserunt dicta ullam error, enim quis illum corporis dolorem, porro temporibus iure aut eveniet deleniti harum animi culpa iste similique odit!</p>
         <p>Obcaecati, autem aliquam ipsam modi consectetur harum libero repellat fuga provident, corporis numquam quo suscipit neque hic dolor facilis, assumenda natus illum unde architecto! Sed?</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatum maxime explicabo voluptates corporis voluptas quidem aut quibusdam alias optio nam, omnis velit voluptate quaerat?</p>
         <p>Sed sit voluptatem molestias aspernatur soluta voluptatibus sapiente minus voluptatum consequuntur aliquid natus error aliquam ipsum delectus libero, voluptate doloremque nemo. Eveniet, ad quae ipsam?</p>
         <p>Cum obcaecati consequuntur explicabo minima quibusdam aut unde consequatur impedit nesciunt velit voluptatum vel doloribus repellat ipsa laudantium expedita illo nemo quaerat, dolorum, totam amet!</p>
         <p>Quaerat pariatur a ut deserunt dicta ullam error, enim quis illum corporis dolorem, porro temporibus iure aut eveniet deleniti harum animi culpa iste similique odit!</p>
      </div>
   </main>

   <aside class="aside js-aside">
      <div class="content">
         <div class="sticky-box js-sticky-box">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="22" viewBox="0 0 16 22" class="icon icon--center rotate rotate--degree90">
               <path fill-rule="evenodd" d="M3 4h10v2h2V2c0-1.1-.9-2-2-2H3C1.9 0 1 .9 1 2v4h2V4zm8.4 11.6L16 11l-4.6-4.6L10 7.8l3.2 3.2-3.2 3.2 1.4 1.4zM6 14.2L2.8 11 6 7.8 4.6 6.4 0 11l4.6 4.6L6 14.2zm7 3.8H3v-2H1v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v2z"/>
            </svg>
         </div>
      </div>
   </aside>
</div>

<footer class="footer">
   <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</footer>

script.js

var $layoutStart = $('.js-sticky-from'),
    $layoutHeader = $('.js-header'),
    $stickyBox = $(".js-sticky-box"),
    $window = $(window),
    stickyStart = $stickyBox.offset(),
    stickyStop = $layoutStart.offset().top + $layoutStart.outerHeight(),
    topOfTemplate = $layoutHeader.offset().top,
    topSpacing = _setTopSpacing();

//triggered on scroll
onScroll = function() {
    if (!($window.width() > 480)) 
        return;
    
    var scrollTop = $window.scrollTop() + topOfTemplate,
        stopLocation = stickyStop - ($stickyBox.outerHeight() + topSpacing);

    if (scrollTop > stopLocation) {
        $stickyBox.offset({
            top: stickyStop - $stickyBox.outerHeight(),
            left: stickyStart.left
        });
    } else if (scrollTop >= $layoutStart.offset().top - topSpacing) {
        $stickyBox.offset({
            top: scrollTop + topSpacing,
            left: stickyStart.left
        });
    } else if (scrollTop < stickyStart.top + (topSpacing - 1)) {
        $stickyBox.offset({top: $layoutStart.offset().top, left: stickyStart.left});
    }
},

//triggered on resize
onResize = function() {
    stickyStart = sticky.start;
    stickyStop = $layoutStart.offset().top + $layoutStart.outerHeight();
    topOfTemplate = $layoutHeader.offset().top;
    _setTopSpacing();
};

// As new images load the page content body gets longer. The bottom of the content area needs to be adjusted in case images are still loading.
setTimeout(function() {
    stickyStop = $layoutStart.offset().top + $layoutStart.outerHeight();
}, 2000);

//setup event listeners
if (window.addEventListener) {
    window.addEventListener('scroll', onScroll, false);
    window.addEventListener('resize', onResize, false);
} else if (window.attachEvent) {
    window.attachEvent('onscroll', onScroll);
    window.attachEvent('onresize', onResize);
}

function _setTopSpacing() {
    var distanceFromTop = 20;

    if ($window.width() > 1024) {
        topSpacing = distanceFromTop + $('.nav-wrap').outerHeight();
    } else {
        topSpacing = distanceFromTop;
        return topSpacing;
    }
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

sticky-in-the-box.markdown

Sticky in the box

A Pen by Mateusz Flisikowski on CodePen.

License.

style.scss

$gutter: .5rem;
$asideWidth: 20%;
$mainWidth: 80%;

.header
{
   background: #fafafa;
   margin-bottom: 1rem;
}

.nav
{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 4rem;
   
   .nav__link
   {
      margin: 1rem;  
   }
}

.wrapper
{
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   min-height: 500px;
}

.aside,
.main
{
   align-self: stretch;
   background: #f3f3f3;
   margin: $gutter;
}

.main
{
   width: $mainWidth;
   flex-basis: $mainWidth;
}

.aside
{
   width: $asideWidth;
   flex-basis: $asideWidth;
}

.content
{
   padding: $gutter;
}

.icon
{
   min-width: 1em;
   min-height: 1em;
   
   &.icon--center
   {
      display: block;
      margin: 0 auto;
   }
}

.rotate
{
   position: relative;
   
   &.rotate--degree45
   {
      transform: rotate(45deg);
   }
   
   &.rotate--degree90
   {
      transform: rotate(90deg);
   }
}