两个 div 元素之间的固定 div

Question

当滚动位置在两个 div 元素之间时，我尝试创建一个固定的 div 元素。我使用以下代码来创建这个固定元素：

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

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

当蓝色的div到达时，我不知道如何去掉它的fixed类。我尝试获取蓝色div的当前位置并将其添加到if语句中：var blueDiv = $('.bottom').offset().top:

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

Fiddle: https://jsfiddle.net/L7p5yeet/

- Appel

---

Appel，在你的fiddle中，你说“如果你到达了蓝色div（底部）”。这是指到达蓝色div的底部，还是蓝色div是整个部分的底部？换句话说，侧边栏需要在到达蓝色div的顶部或底部时立即固定吗？ - Douwe de Haan

我所说的“底部”是指蓝色div的类，而不是它的底部。抱歉，我的表述不够清晰。但感谢您的回答，@DouwedeHaan！它对我非常有效！ - Appel

没问题！它引起了一些混乱，但你解决了它！ - Douwe de Haan

关于信息，CSS引入了position:sticky属性，它看起来非常接近您所寻找的行为。此外，还有一些JavaScript polyfills可以在该属性未实现时使用。以下是一个纯CSS示例：https://codepen.io/anon/pen/XRwoRv - G-Cyrillus

@GCyrillus 我确实看到了这个。但是我搞不清楚它是怎么工作的。粘性定位不起作用。 - Appel

Answer 1

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>

- Saeed Ahmadian Masal

Answer 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');
    }
});

- Douwe de Haan