Make sticky/fixed element stop at footer

Question

I'm trying to make the side bar stop following the user's scroll once it hits the footer. Right now I set the z-index to -2 so that it goes behind the footer, but it sticks out a tiny bit.

JavaScript

$(document).ready(function () {
    var floatingDiv = $('#side_bar');
    var floatingDivPosition = floatingDiv.position();
    $(window).scroll(function (){
        var scrollBarPosition = $(window).scrollTop();
        if(scrollBarPosition >= floatingDivPosition.top) {
            floatingDiv.css({
                'position': 'fixed',
                'top': 55,
                'width': '18.6676%',
                'z-index': -2
            });
        }
        else{
            floatingDiv.css({
                'position': 'relative',
                'top': 0,
                'width': '79.4392%'
            });
        }
    });
});

HTML

<div id="content">
  <div id="col_1">
    <div id="side_bar">
      <h4 id="cater_to">We cater to</h4>
      <a href="#"><button class="side_bar_btns">Contractor</button></a>
      <a href="#"><button class="side_bar_btns">Wood/Sport Floors</button></a>
      <a href="#"><button class="side_bar_btns">Grocery/Commercial</button></a>
      <a href="#"><button class="side_bar_btns">Education</button></a>
      <h4 id="simplicity">Simplicity</h4>
      <div id="all_systems_side_bar">
        <img src="images/all_systems_logo.png" alt="All Systems Maintenance logo. Links to more about All Systems Maintenance." width="100%">
      </div><!-- all systems side bar -->
    </div><!-- side_bar -->
  </div><!-- col_1 -->

  <div id="col_2">
    //// bunch of stuff here 
  </div><!-- col_2 -->

  <div class="clear"></div>
</div><!-- content -->

<footer>
    /// bunch of stuff here
</footer>

CSS

#col_1 {
    float:left;
    margin-top:44px;
    width:23.4994%;
    margin-left:3.9531%;    
}

#side_bar {
    background:#003768;
    min-height:665px;
    width:79.4392%;
    border-radius:20px;
    box-shadow: 10px 10px 5px #888;
}

#col_2 {
    float:right;
    margin-top:44px;
    width:68.5944%;
    margin-right:3.9531%;
}

footer {
    background-image:url(../images/foot_background.gif);
    background-repeat:no-repeat;
    background-size:cover;
}

The footer background is almost the same height as the screen (about 824px when I inspect it with Chrome).

Sorry about that. I edited the question by adding more code. — theBartender, Jul 26 '17 at 13:25
Just in case it matters 'top' : 55 is 55 because the nav is sticky and 50 px in height. — theBartender, Jul 26 '17 at 13:33

score 0 · Answer 1 · answered Jul 27 '17 at 17:14

Found this gem on Youtube at https://www.youtube.com/watch?v=5s0L6dCVevk and changed it slightly to come up with the following, which works.

$(function() {
   if ($('#side_bar').length) {
      var el = $('#side_bar');
      var stickyTop = $('#side_bar').offset().top;
      var stickyHeight = $('#side_bar').height();

      $(window).scroll(function(){
        var limit = $('footer').offset().top - stickyHeight - 20;

        var windowTop = $(window).scrollTop();

        if (stickyTop < windowTop) {
            el.css({
                position: 'fixed',
                top: 55,
                width: '18.6676%'
            });
        } else {
            el.css({
                position: 'static',
                width: '79.4392%'
            });
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({
                top: diff
            });
        }
    });
}
});

Make sticky/fixed element stop at footer

1 Answers1

Linked