JS/CSS - Sticky buttons within a section. Demo: https://codepen.io/davidsword/pen/OEZMay

section-sticky-buttons.css

#events {
    overflow: hidden;
    position: relative;
}
#events .show {
    width: 30.3%;
    background: white;
    float: left;
    padding: 150px 0;
    margin: 20px 1.5%;
    color: #29ABE2;
}
#stickme-parent {
    clear: both;
    overflow: hidden;
    position: relative;
    display: block;
    padding-bottom: 70px;
}
#stickme {
    background: #ff416c;
    background: -webkit-linear-gradient(to bottom, #ff416c, #ff4b2b);
    background: linear-gradient(to bottom, #ff416c, #ff4b2b);
    width: 100%;
    padding: 10px 0;
    position: absolute;
    top: 0;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
}

#stickme.stick {
    position: fixed;
    bottom: 0;
    top: auto;
}
#stickme.stick--is-stuck {
    position: absolute;
    bottom: 0;
}

section-sticky-buttons.html

<section id="events">
    <div>section</div>
    <div class="show">1</div>
    <div class="show">2</div>
    <div class="show">3</div>
    <div id="stickme-parent">
        <div id="stickme">
            Section Sticky Buttons »
        </div>
        <div class="show">4</div>
        <div class="show">5</div>
        <div class="show">6</div>
        <div class="show">7</div>
        <div class="show">8</div>
        <div class="show">9</div>
    </div>
</section>

section-sticky-buttons.js

(function () {
    "use strict"

    stick('#stickme','bottom');

    function stick(ele, position = 'top') {

        // get the element to be stuck
        const stick = document.querySelector(ele);
        const stickPos = stick.getBoundingClientRect();
        const stickBottom = stickPos.top + stick.clientHeight;

        // get the parent
        const stickParent = stick.parentNode;
        const stickParentPos = stickParent.getBoundingClientRect();

        // on debounce scroll
        window.addEventListener('scroll', debounce(function(){

            // get current scroll pos
            let scrollPos = document.documentElement.scrollTop || document.body.scrollTop;

            // current viewport dimentions
            let viewportHeight = document.documentElement.clientHeight;
            let viewportBottom = scrollPos + viewportHeight;

            // rang to stick
            if (viewportBottom > stickBottom) {
                stick.classList.add('stick');
            } else {
                stick.classList.remove('stick');
            }

            // if the bottom of the viewport is past the sticky element's parent bottom
            // anchor to bottom of parent
            if (viewportBottom > (stickParentPos.top + stickParentPos.height)) {
                stick.classList.add('stick--is-stuck');
            } else {
                stick.classList.remove('stick--is-stuck');
            }
        }));

        // slow yo role
        function debounce(func, wait = 5, immediate = true) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        };
    }
} ());