在到达页脚时使固定位置div停止

Question

I have a side menu (.link-panel) . Inside .link-panel is a div (.cover) that hold the contents of the .link-panel . .cover is a fixed div so that the links can move when the user scrolls. The only problem I am facing is that I have a footer at the bottom, and whenever I scroll down the cover div goes on top of the .footer . I am trying to make it so that the .cover stops when it reaches the footer. That way the .footer and .cover don't overlap. I have tried using some jQuery in order to solve this, but my technique is not working. It's producing very weird results. Sometimes, some of the links are above the window and can't be shown, other times when you scroll down to the .footer , the .link-panel does not go up again when you scroll. You can see and experiment here with the jsFiddle I created.

HTML

<div class="container">

  <div class='control_panel'>
    <div class='control_title'>
      <h2>Your Settings</h2>
    </div>

    <div class='control_settings'>

    </div>
  </div>

  <div class="link-panel">
  <div class="cover">


    <ul>


      <li> Dashboard</li>
      <hr>
      <li> Blog</li>
      <hr>
      <li><span><b>|</b> Settings</span></li>
      <hr>
      <li> Contact Us</li>


    </ul>
      </div>
  </div>
  <!--End of link panel div-->
</div>

<div class='footer'>

</div>

CSS

.container {
  display: block;
  margin: 0px auto;
  width: 100%;
  padding-left: 30%;
  box-sizing: border-box;
  position: relative;
}

.footer {
  display: block;
  width: 100%;
  height: 500px;
  background-color: black;
  margin-top: 0px;
}

html,
body {
  position: relative;
  height: 100%;
  background-color: #f2f2f2;
}

.control_panel {
  position: relative;
  display: inline-block;
  width: 60%;
  margin-left: 0px;
}

.control_title {
  display: block;
  background-color: white;
  height: 100px;
  margin-bottom: 30px;
}

.control_settings {
  display: block;
  background-color: white;
  height: 900px;
  width: 900px;
}

.link-panel {
  position: absolute;
  float: left;
  width: 30%;
  height: 100%;
  background-color: #333333;
  left: 0;
  top: 0;
}

.cover{
   position: fixed;
}
.link-panel ul {
  list-style-type: none;
  font-size: 19px;
  margin-top: 35px;
}

.link-panel li {
  margin-top: 15px;
}

jQuery

function checkOffset() {
  var a=$(document).scrollTop()+window.innerHeight;
  var b=$('.footer').offset().top;
  if (a<b) {
    $('.cover').css('bottom', '-14');
  } else {
    $('.cover').css('bottom', (-14+(a-b))+'px');
  }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);

How do I make it so that .cover moves up and down when the user scrolls, but stops when it reaches the .footer , but when the user scrolls up again so does the .cover ?

Answer 1

EDIT: hopefully now it works on Chrome too.

I've made a fiddle for your case: https://jsfiddle.net/g8ctha2o/5/

Tell me if it works for you.

Basically what you do is you check on the scroll event that the bottom edge of the menu has a smaller position value than the top edge of the footer. Once this is no longer true, you reach a scroll threshold in which you change its position from fixed to absolute with jQuery.

var menuBottom,
  footerTop = $('.footer').offset().top,
  positionChanged = false,
  scrollThreshold;

$('.scrollable').on('scroll', function() {
  menuBottom = $('.scrollable').scrollTop() + $('.menu').offset().top + $('.menu').outerHeight();
  if (!positionChanged) {
    if (menuBottom + 5 >= footerTop) {
      scrollThreshold = $('.scrollable').scrollTop();
      $('.menu').css({
        visibility: 'hidden',
        position: 'absolute',
        top: menuBottom - $('.menu').outerHeight() - 5,
        right: 35,
        visibility: 'visible'
      });
      positionChanged = true;
    }
  } else {
    if (scrollThreshold > $('.scrollable').scrollTop()) {
      $('.menu').css({
        position: 'fixed',
        top: 450,
        right: 60
      });
      positionChanged = false;
    }
  }
});