Фиксированный div между двумя элементами div

Я пытаюсь создать фиксированный элемент div, когда положение прокрутки между двумя элементами div. Я использую этот код для создания фиксированного элемента:

var sidebar = $('.sidebar').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > sidebar) {
        $('.sidebar').addClass('fixed');
    }else{
        $('.sidebar').removeClass('fixed');
    }
});

Я не знаю, как удалить фиксированный класс, когда синий div достиг. Я попытался получить текущее положение синего div и добавить его в Оператор if: var blueDiv = $('.bottom').offset().top:

if ($(window).scrollTop() > sidebar && $(window).scrollTop() < blueDiv ){
    // add fixed class
}else{
    // remove fixed class
}

Скрипка:https://jsfiddle.net/L7p5yeet/

8
css jquery sticky

2 ответов

вы забыли включить высоту боковой панели, когда вы проверили, достигла ли боковая панель синего div:

var sidebar = $('.sidebar').position().top;
var blueDiv = $('.bottom').position().top - $('.sidebar').innerHeight();

$(window).scroll(function() {
    var sT = $(window).scrollTop();
    if (sT > sidebar && sT < blueDiv) {
        $('.sidebar').addClass('fixed');
    }else{
        $('.sidebar').removeClass('fixed');
    }
});
4

var sidebar = $('.sidebar').offset().top;
var blueOffset = $('.bottom').offset().top;
var sidebarHeight = $('.sidebar').height();
// If you reached the blue div (bottom), remove the 'fixed' class. Because the fixed element may not scroll over the footer or blue div. If you scroll back to the top (before the blue div or between the sidebar and the blue div) the fixed class need to be added again.
$(window).scroll(function() {
  if ($(window).scrollTop() > sidebar) {
    $('.sidebar').addClass('fixed');
  } else {
    $('.sidebar').removeClass('fixed');
  }
  if ($(window).scrollTop() > blueOffset - sidebarHeight) {
    $('.sidebar').removeClass('fixed');
  }
});
body {
  margin: 0;
  padding: 0;
}

.fixed {
  position: fixed;
  width: inherit;
  overflow: hidden;
  background: red;
  top: 0;
}

.topbar {
  background: red;
  height: 85px;
  text-align: center;
  line-height: 85px;
  color: #fff;
}

.container {
  width: 100%;
  overflow: hidden;
}

.left {
  float: left;
  width: 75%;
  background: gray;
  height: 800px;
}

.right {
  float: left;
  width: 25%;
  background: black;
  color: #fff;
}

.bottom {
  width: 100%;
  background: blue;
  overflow: hidden;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-align: center;
}

.footer {
  height: 600px;
  color: #000;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar">
  <p>
    A simple topbar
  </p>
</div>
<div class="container">
  <div class="left">
    <p>
      Start fixed element
    </p>
  </div>
  <div class="right">
    <div class="sidebar">
      <ul>
        <li>Menu item 1</li>
        <li>Menu item 1</li>
      </ul>
    </div>
  </div>
  <div class="bottom">
    <p>
      Remove fixed element
    </p>
  </div>
</div>
<div class="footer">
  <p>
    A simple footer
  </p>
</div>
4