固定两个 div 元素之间的 div答案

【问题标题】：Fixed div between two div elements固定两个 div 元素之间的 div
【发布时间】：2017-05-29 07:20:23
【问题描述】：

当滚动位置在两个 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/

【问题讨论】：

Appel，在你的小提琴中你声明If you reached the blue div (bottom)。这是否意味着到达蓝色 div 的底部，或者蓝色 div 是整个部分的底部？也就是说，侧边栏是否需要在到达蓝色div的顶部或底部时立即修复？
我所说的“底部”是蓝色 div 的类，而不是它的底部。对不起，我不清楚。但是感谢您的回答，它对我来说非常适合@DouwedeHaan！
没问题！它引起了一些混乱，但你清除了它！
对于信息，CSS 带来了 position:sticky，这似乎非常接近您寻找的行为。还有一些未实现的 javascript polyfills。纯 CSS 示例 codepen.io/anon/pen/XRwoRv
@GCyrillus 我确实看到了。但我无法弄清楚它是如何工作的。粘性位置不起作用..

标签： jquery css sticky

【解决方案1】：

当您检查侧边栏是否已经到达蓝色 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');
    }
});

【讨论】：

【解决方案2】：

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>

【讨论】：