Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

Question

I have been looking for some time now for a solution to my sticky sidebar problem. I have a specific idea of how I would like it to act; effectively, I would like it to stick to the bottom as you scroll down, and then as soon as you scroll back up I would like it to stick to the top, in a fluid motion (no jumping). I am unable to find an example of what I am trying to achieve, so I have created an image that I hope will illustrate the point clearer:

1. Sidebar sits under the header.
2. As you scroll down the sidebar remains level with the content of the page so that you can scroll through both sidebar and content.
3. Reach the bottom of the sidebar, the sidebar sticks to the bottom of the viewport (most plugins only allow for sticking to top, some that allow for sticking to bottom don't allow for both).
4. Reach the bottom, sidebar sits above the footer.
5. As you scroll back up, the sidebar stays level with the content so you can scroll through the content and sidebar again.
6. Reach the top of the sidebar, the sidebar sticks to the top of the viewport.
7. Reach the top and the sidebar sits back below the header.

I hope this is enough information. I have created a jsfiddle to test any plugins/scripts, which I have reset for this question: http://jsfiddle.net/jslucas/yr9gV/2/ .

Answer 1

+1 to the very nice and ilustrative image.

I know it's an old question, but I casually found the same question posted by you in forum.jquery.com and one answer there ^{(by@tucker973)}, suggested one nice library to make this and wanted to share it here.

It's called sticky-kit by @leafo

• github project
• webpage
• simple example in jsFiddle ^{(same code as the snippet attached here)}

Here you have the code of a very basic example that I prepared and a working demo to see the result.

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(function() {
  $(".sidebar").stick_in_parent({
    offset_top: 10
  });
});

* {
  font-size: 10px;
  color: #333;
  box-sizing: border-box;
}
.wrapper,
.header,
.main,
.footer {
  padding: 10px;
  position: relative;
}
.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}
.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}
.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}
.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}
.top {
  position: absolute;
  top: 10px;
}
.bottom {
  position: absolute;
  bottom: 10px;
}
.clear {
  clear: both;
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

Of course, all credits go to the creator of the plugin, I only made this example to show it here. I need to accomplish the same result that you was after and found this plugin very useful.

Answer 2

Thanks for the great graphic. I was also looking for a solution to this challenge!

Unfortunately, the other answer posted here doesn't address requirement #5 that stipulates the ability to scroll back through the sidebar smoothly.

I created a fiddle that implements all requirements: http://jsfiddle.net/bN4qu/5/

The core logic that needs to be implemented is:

If scrolling up OR the element is shorter than viewport Then
  Set top of element to top of viewport If scrolled above top of element
If scrolling down then
  Set bottom of element at bottom of viewport If scrolled past bottom of element

In the fiddle I use CSS3 transform for moving the target element around, so it won't work in e.g. IE<9. The logic is sound though for using a different approach.

Also, I modified your fiddle so that the sticky sidebar has a gradient background. This helps to show that the proper behavior is being exhibited.

I hope this is useful to someone!

Answer 3

Here's an example of how to implement this:

JavaScript:

$(function() {

var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;

var $sidebar = $("#sidebar");
if ($sidebar.length > 0) {

    var initialSidebarTop = $sidebar.position().top;

    $window.scroll(function(event) {

        var windowHeight = $window.height();
        var sidebarHeight = $sidebar.outerHeight();

        var scrollTop = $window.scrollTop();
        var scrollBottom = scrollTop + windowHeight;

        var sidebarTop = $sidebar.position().top;
        var sidebarBottom = sidebarTop + sidebarHeight;

        var heightDelta = Math.abs(windowHeight - sidebarHeight);
        var scrollDelta = lastScrollTop - scrollTop;

        var isScrollingDown = (scrollTop > lastScrollTop);
        var isWindowLarger = (windowHeight > sidebarHeight);

        if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
            $sidebar.addClass('fixed');
        } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
            $sidebar.removeClass('fixed');
        }

        var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
        var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

        if (dragBottomDown) {
            if (isWindowLarger) {
                $sidebar.css('top', 0);
            } else {
                $sidebar.css('top', -heightDelta);
            }
        } else if (dragTopUp) {
            $sidebar.css('top', 0);
        } else if ($sidebar.hasClass('fixed')) {
            var currentTop = parseInt($sidebar.css('top'), 10);

            var minTop = -heightDelta;
            var scrolledTop = currentTop + scrollDelta;

            var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
            var newTop = (isPageAtBottom) ? minTop : scrolledTop;

            $sidebar.css('top', newTop);
        }

        lastScrollTop = scrollTop;
        wasScrollingDown = isScrollingDown;
    });
}
});

CSS:

#sidebar {
  width: 180px;
  padding: 10px;
  background: red;
  float: right;
}

.fixed {
  position: fixed;
  right: 50%;
  margin-right: -50%;
}

Demo: http://jsfiddle.net/ryanmaxwell/25QaE/

This works as expected in all scenarios and is well-supported in IE too.

Answer 4

Two Direction Sticky Sidebar by Krzysztof Antosik.

If anyone needs a lightweight solution not based on jQuery, feel free to check out my code.

Using the script is trivial. Just place the JavaScript code at the end of the page, and then add the attribute: data-sticky ="true" to the side panel's tag.

Details can be found on github: Two-direction-Sticky-Sidebar on GitHub.

Or my website: Dwukierunkowy panel boczny – Two Direction Sticky Sidebar (only Polish language)

Try working demo: Two-direction-Sticky-Sidebar Demo.

/**
 * StickySidebar.js
 * A short JavaScript code that allows you to quickly and easily implement a Sticky Sidebar,
 * if the browser's viewport is too short, sidebar's contents will scroll in the direction
 * the user scrolls and sticks to either top or bottom of the screen when there's no more content. 
 * And everything with the use of pure JavaScript, 
 * thanks to which you we'll save redundant code and gain efficiency.
 * -- Krzysztof Antosik
 *
 *
 * @license The MIT License, https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar/blob/main/LICENSE
 * @version 1.6
 * @author  Krzysztof Antosik, https://github.com/Krzysztof-Antosik/
 * @updated 2023-07-06
 * @link    https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar/
 *
 *
 */


//Sticky element selector..
const stickyElement = document.querySelector(`[data-sticky="true"]`),

//..and other constant
startPosition = stickyElement.getBoundingClientRect().top;

//Varibles
var endScroll = window.innerHeight - stickyElement.offsetHeight - 500,
currPos = window.scrollY,
screenHeight = window.innerHeight,
stickyElementHeight = stickyElement.offsetHeight
topGap = 0,
bottomGap = 0;

//Set Gaps
setTimeout(() => {
    if (stickyElement.hasAttribute(`data-top-gap`)){
        const dataTopGap = stickyElement.getAttribute(`data-top-gap`);
        topGap = String(dataTopGap) == "auto" ? startPosition : parseInt(dataTopGap);
    }

    if (stickyElement.hasAttribute(`data-bottom-gap`)){
        bottomGap = parseInt(stickyElement.getAttribute(`data-bottom-gap`));
    }
}, 100);

//Add required style to sticky element
stickyElement.style.position = `sticky`;
stickyElement.style.top = topGap + `px`; 
stickyElement.style.height = "fit-content";

//Main function
function positionStickySidebar() {
    endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;
    let stickyElementTop = parseInt(stickyElement.style.top.replace(`px;`, ``));
    if (stickyElementHeight+topGap+bottomGap>screenHeight) {
        if (window.scrollY < currPos) {

            //Scroll up
            if (stickyElementTop < topGap) {
                stickyElement.style.top = (stickyElementTop + currPos - window.scrollY) + `px`;
            } else if (stickyElementTop >= topGap && stickyElementTop != topGap) {
                stickyElement.style.top = topGap + `px`;
            }
        } else {

            //Scroll down
            if (stickyElementTop > endScroll) {
                stickyElement.style.top = (stickyElementTop + currPos - window.scrollY) + `px`;
            } else if (stickyElementTop < (endScroll) && stickyElementTop != endScroll) {
                stickyElement.style.top = endScroll + `px`;
            }
        }
    } else {
        stickyElement.style.top = topGap + `px`;
    }
    currPos = window.scrollY;
}
function stickyElementToMe(){
    stickyElement.style.top = topGap + `px`;
}
function updateSticky(){
    screenHeight = window.innerHeight;
    stickyElementHeight = stickyElement.offsetHeight;
    positionStickySidebar();
}
setTimeout(() => {
    //Check heights of the viewport and the sticky element on window resize and reapply positioning
    window.addEventListener(`resize`, ()=>{
        currPos = window.scrollY;
        updateSticky();
    });   
    //Follow the main function when scrolling
    document.addEventListener(`scroll`, updateSticky, {
        capture: true,
        passive: true
    }); 
}, 1000);

div {
  display: flex;
  align-items: flex-start;
}

h1 {
  margin: 0;
}

header {
  width: 100%;
  text-align: center;
  background: #1ABC9C;
}

main {
  width: 65%;
  padding: 0 5%;
  background: #95A5A6;
}

aside {
  width: 15%;
  background: #34495E;
  padding: 0 5%;
  text-align: center;
  position: sticky;
  top: 0;  
}

ul {
  list-style: none;
  padding: 0;
}

li {
  height: 40px;
}

<html>
  <body>
    <header>
      <h1>
      Two direction sticky sidebar
      </h1>
    </header>
    <div>
      <main>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
      </main>

      <aside data-sticky="true">
        <h2>Sidebar </h2>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
          <li>Link 5</li>
          <li>Link 6</li>
          <li>Link 7</li>
          <li>Link 8</li>
          <li>Link 9</li>
          <li>Link 10</li>
          <li>Link 11</li>
          <li>Link 12</li>
          <li>Link 13</li>
          <li>Link 14</li>
          <li>Link 15</li>
          <li>Link 16</li>
          <li>Link 17</li>
          <li>Link 18</li>
          <li>Link 19</li>
          <li>Link 20</li>
        </ul>
      </aside>
    </div>
  </body>
</html>

Answer 5

You can also use Sticky Sidebar JS plugin for the same effect you are wanting . It has a small and simple documentation on "How to use". I also wanted the similar scrolling effect and it did work pretty nicely.

https://abouolia.github.io/sticky-sidebar/

Answer 6

Vanilla JS option!

After a while of wanting to do this with Vanilla JS, I've finally cracked it. It definitely could do with some tidying up, but it works!

  const sidebar = document.querySelector('#sidebar');

  let lastScrollTop = 0;
  let scrollingDown;
  let isAbsolute = false;

  let absolutePosition = 0;
  let windowTop;
  let sidebarTop;
  let windowBottom;
  let sidebarBottom;

  function checkScrollDirection() {
    if (lastScrollTop <= window.scrollY) {
      scrollingDown = true
    } else {
      scrollingDown = false
    }
    lastScrollTop = window.scrollY;
  }      

  function fixit(pos,top,bottom,isAb) {

    sidebar.style.position = pos;
    sidebar.style.top = top;
    sidebar.style.bottom = bottom;
    isAbsolute = isAb;
  }

  function scrolling() {
    //optional width check
    if (window.innerHeight <= sidebar.offsetHeight && window.innerWidth > 996) {
      checkScrollDirection();
      windowTop = window.scrollY;
      sidebarTop = sidebar.offsetTop;
      windowBottom = window.scrollY + window.innerHeight;
      sidebarBottom = sidebar.offsetHeight + sidebar.offsetTop;

      if(!scrollingDown && windowTop <= sidebarTop) {
        //fixToTop
        fixit("fixed",0,"unset",false)
      }

      if(scrollingDown && windowBottom >= sidebarBottom) {
        //fixToBottom
        fixit("fixed","unset",0,false)
      }

      if((!isAbsolute && windowTop > sidebarTop) || !isAbsolute && windowBottom < sidebarBottom) {
        //fixInPlace
        let absolutePosition = (windowTop + sidebar.offsetTop) + "px";
        fixit("absolute",absolutePosition,"unset",true)
      }
    }
  }

  window.addEventListener('scroll', scrolling);

Answer 7

There is a relatively unknown plugin in Wordpress repository known as WP Sticky Sidebar. The plugin does exactly what you wanted (Sticky sidebar: stick to bottom when scrolling down, top when scrolling up) WP Sticky Sidebar Wordpress repository Link: https://wordpress.org/plugins/mystickysidebar/

Answer 8

I was looking for the exact same thing. Apparently I needed to search for some obscure terms just to find a similar question with the graphic. Turns out it's exactly what I was looking for. I couldn't find any plugins so I decided to make it myself. Hopefully someone will see this and refine it.

Here's a quick and dirty sample html I'm using.

<div id="main">
    <div class="col-1">
    </div>
    <div class="col-2">
        <div class="side-wrapper">
            sidebar content
        </div>
    </div>
</div>

Here's the jQuery I made:

var lastScrollPos = $(window).scrollTop();
var originalPos = $('.side-wrapper').offset().top;
if ($('.col-2').css('float') != 'none') {
    $(window).scroll(function(){
        var rectbtfadPos = $('.rectbtfad').offset().top + $('.rectbtfad').height();
        // scroll up direction
        if ( lastScrollPos > $(window).scrollTop() ) {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // if has reached the original position, return to relative positioning
            if ( ($(window).scrollTop() + $('#masthead').height()) < originalPos ) {
                $('.side-wrapper').css({
                    'position': 'relative',
                    'top': 'auto',
                    'bottom': 'auto'
                });
            } 
            // sticky to top if scroll past top of sidebar
            else if ( ($(window).scrollTop() + $('#masthead').height()) < $('.side-wrapper').offset().top && $('.side-wrapper').css('position') == 'absolute' ) {
                $('.side-wrapper').css({
                    'position': 'fixed',
                    'top': 15 + $('#masthead').height() + 'px', // padding to compensate for sticky header
                    'bottom': 'auto'
                });
            }
        } 
        // scroll down
        else {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // check if rectbtfad (bottom most element) has reached the bottom
            if ( ($(window).scrollTop() + $(window).height()) > rectbtfadPos && $('.side-wrapper').css('position') != 'fixed' ) {
                $('.side-wrapper').css({
                    'width': $('.col-2').width(),
                    'position': 'fixed',
                    'bottom': '0',
                    'top': 'auto'
                });
            }
        }
        // set last scroll position to determine if scrolling up or down
        lastScrollPos = $(window).scrollTop();

    });
}

Some notes:

• .rectbtfad is the bottom most element in my sidebar
• I'm using the height of my #masthead because it's a sticky header so it needs to compensate for it
• There's a check for col-2 float since I'm using a responsive design and don't want this activating on smaller screens

If anyone can refine this a bit more that'd be great.

Answer 9

Vanilla JS implementation of https://medium.com/ right sidebar.

Demo: JSFiddle

 function addThrottledScrollEventListener(element, callback) {
    let lastScrollPosition = 0;
    let isAnimationFrameRequested = false;
    element.addEventListener("scroll", function () {
        let beforeLastScrollPosition = lastScrollPosition;
        lastScrollPosition = element.scrollY;
        if (!isAnimationFrameRequested) {
            element.requestAnimationFrame(function () {
                callback(lastScrollPosition, beforeLastScrollPosition);
                isAnimationFrameRequested = false;
            });
            isAnimationFrameRequested = true;
        }
    });
}

function setupRightSidebarScroll(sidebar) {
    let isStickToTop = false;
    let isStickToBottom = false;
    addThrottledScrollEventListener(window, (currentScrollPosition, previousScrollPosition) => {
        let isScrollingDown = previousScrollPosition < currentScrollPosition;
        let isScrollingUp = !isScrollingDown;
        let scrollTop = window.scrollY;
        let scrollBottom = scrollTop + window.innerHeight;
        let sidebarBottom = sidebar.offsetTop + sidebar.offsetHeight;
        let isAlwaysSticky = sidebar.offsetHeight <= window.innerHeight;

        if (isStickToTop && isAlwaysSticky)
            return;
        if (!isStickToTop && isScrollingUp && scrollTop <= sidebar.offsetTop || isAlwaysSticky) {
            sidebar.style.position = "sticky";
            sidebar.style.marginTop = `0px`;
            sidebar.style.top = "0px";
            isStickToTop = true;
            return;
        }
        if (isScrollingDown && isStickToTop) {
            sidebar.style.position = "relative";
            sidebar.style.top = `0px`;
            sidebar.style.marginTop = `${scrollTop}px`;
            isStickToTop = false;
            return;
        }
        if (!isStickToBottom && isScrollingDown && scrollBottom >= sidebarBottom) {
            sidebar.style.position = "sticky";
            sidebar.style.marginTop = `0px`;
            sidebar.style.top = `${window.innerHeight - sidebar.offsetHeight}px`;
            isStickToBottom = true;
            return;
        }
        if (isScrollingUp && isStickToBottom) {
            sidebar.style.position = "relative";
            sidebar.style.marginTop = `${scrollBottom - sidebar.offsetHeight}px`;
            sidebar.style.top = `0px`;
            isStickToBottom = false;
            return;
        }
    });
}