Jquery Sticky side bar won't stick to bottom of website

Question

My sticky sidebar works when I scroll past the initial "elementpos", it goes into a fixed position and follows the screen, What I want it to do after is stick right next to the bottom of the div right next to it once I scroll to a certain point. I tried to use the footer height + a fixed amount of pixels in order to make it go into a absolute position once scrolled to that point. For some reason it's not working once I scroll past the point i'd like it to go to.

JS FIDDLE: https://jsfiddle.net/j05t35ax/2/

Here is my jquery script.

$(document).scroll(function() {
    var scrollpos = $(window).scrollTop();
    var elementpos = $('.textbody-aa').offset().top;
    var boxesoffsetbottom = $('.boxes-buttons').offset().top + (494);
    var footerheight = $('.footer').offset().top + (-25);

    if (scrollpos >= elementpos) {
        $(".boxes-buttons").addClass("fixed")
        $(".boxes-buttons").removeClass("static")
    }

    else if (boxesoffsetbottom >= footerheight) {
        $(".boxes-buttons").addClass("staticbottom")
        $(".boxes-buttons").removeClass("fixed")
        $(".boxes-buttons").removeClass("static")
    }

    else {
        $(".boxes-buttons").removeClass("staticbottom")
        $(".boxes-buttons").removeClass("fixed")
        $(".boxes-buttons").addClass("static")
    }

});

    .fixed {
  position: fixed;
  right: 0px;
  top: 0px;
}

.static {
  position: static;
}

.staticbottom {
  position: absolute;
  bottom: 145px;

}

Answer 1

Try this, your if conditions just needed to consider the tops and bottoms, so I have added the window height to the scroll position and added the blue div's height to calculate its bottom position, to allow the red div to be restored to its fixed state. And also made sure that all three classes are addressed in each condition.

And here's a different fiddle without the class swapping: https://jsfiddle.net/manoeuvres/p7o265nr/ which gives different advantages/disadvantages.

$(document).scroll(function() {
    var scrollpos = $(window).scrollTop();
    var winHeight = $(window).height();
    var elementpos = $('.textbody-aa').offset().top;
    var elementHeight = $('.textbody-aa').height();
    var boxesoffsetbottom = $('.boxes-buttons').offset().top + (340);
    var footerheight = $('.footer').offset().top - (50);

    if (scrollpos >= elementpos && (scrollpos+winHeight) < (elementHeight+50)) {
        $(".boxes-buttons").addClass("fixed");
        $(".boxes-buttons").removeClass("static");
        $(".boxes-buttons").removeClass("staticbottom");
    } else if (boxesoffsetbottom >= footerheight ) {
        $(".boxes-buttons").addClass("staticbottom");
        $(".boxes-buttons").removeClass("fixed");
        $(".boxes-buttons").removeClass("static");
    } else {
        $(".boxes-buttons").removeClass("staticbottom");
        $(".boxes-buttons").removeClass("fixed");
        $(".boxes-buttons").addClass("static");
    }

});

.footer{
  display:block;
  bottom:0px;
  width: 100%;
  height: 200px;
  background-color: pink;
}

.textbody-aa{
  margin-bottom: 50px;
  margin-top: 50px;
  height: 1000px;
  width:150px;
  background-color: #123d80;
}

.boxes-buttons{
  height: 340px;
  width:150px;
  background-color: red;
  position: absolute;
  right:50px;
  top: 50px;
}

.fixed{
  position: fixed;
}

.static{
  position: absolute;
  right:50px;
  top: 50px;
}

.staticbottom{
  position: absolute;
  right:50px;
  top: 710px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="textbody-aa">
Please stop at the bottom and the top
</div>
<div class ="boxes-buttons">
no
</div>

<footer class="footer">come here</footer>