修复了两个滚动点之间的 div 定位

Question

我有七个盒子。首先我想正常滚动box1。当 box2 到达视口的顶部时，它应该与示例中的相同。当我一次又一次地在 box2 上滚动时（可能是两个窗口高度或 X 像素高度），我必须为某些视图设置动画（动画可能是显示/隐藏等）。动画完成后，我需要移除固定定位并开始正常滚动剩余的框。有什么帮助吗？

[我可以在滚动时再次为 box4 或 box5 使用相同的固定定位]

Example http://jsfiddle.net/z0yv9gox/

这里是代码

var winHit = $(window).height();
var winWid = $(window).width();
$('.box').css({'height':winHit+'px','width':winWid+'px'});

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

.box{height:200px;}
.box1{background:#333}
.box2{background:#ccffff;}
.box3{background:#999}
.box4{background:#ffcccc}
.box5{background:#666}
.box6{background:#999}
.box7{background:#333}

.fixed{position:fixed; top:0; left:0; z-index:2; width:100%;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>

提前致谢。

Answer 1

因此，如果我对您的理解正确，我认为您将希望将要修复的框放在另一个 div 中，并相对定位该 div，并为其指定您希望固定框行进多远的高度（在我的例如，我在 css 中给它 300vh，但如果你想像上面的例子一样通过 javascript 添加这个高度，你可以）。然后，一旦窗口到达相对定位的父框的顶部，您将需要修复您的框。这样，当您行驶所需的距离时，您可以添加另一个类，这一次再次为您的固定框提供一个绝对位置，这一次放置在您相对定位的父框的底部。为此，您将需要 2 个 if 语句，还需要计算父框和固定框的高度。然后，一旦窗口顶部到达固定框支架的顶部，您就添加了固定类，当滚动位置达到固定框支架高度减去您的固定框高度时，您可以添加另一个将其粘贴到该 div 底部的类。如果我误解了您的问题，请在下面的 cmets 中告诉我。

好的，所以我知道这可能有点令人困惑，所以在这里它与我制作的小提琴一起使用。

Fiddle Demo

$(window).on('scroll', function(){
  var windowTop = $(window).scrollTop();
  $('.fixed-box-holder').each(function(){
    var boxTop = $(this).offset().top;
    var boxHolderHeight = $(this).height();
    var fixedBox = $(this).children('.fixed-box');
    var boxHeight = fixedBox.height();
    var boxStop = boxHolderHeight - boxHeight;
    
    if (windowTop >=  boxTop) {
      fixedBox.addClass('fixed');
    }else{
      fixedBox.removeClass('fixed');
    }
    if(windowTop >= boxTop + boxStop){
      fixedBox.addClass('scrolled');
    }else{
      fixedBox.removeClass('scrolled');
    }
  });
});

body{margin:0;}
.box{
  height:100vh;
  color:#fff;
}
.fixed-box-holder{
  position:relative;
  height:300vh;
}
.fixed-box{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  background:blue;
}
.fixed{
  position:fixed; 
  z-index:1; 
}
.scrolled{
  position:absolute;
  top:auto;
  bottom:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box" style="background:#333;">First Box</div>
<div class="fixed-box-holder">
  <div class="box fixed-box">Fixed Box</div>
</div>
<div class="box" style="background:#444;">Second Box</div>
<div class="box" style="background:#555;">Third Box</div>
<div class="box" style="background:#666;">Fourth Box</div>
<div class="fixed-box-holder">
  <div class="box fixed-box">Fixed Box</div>
</div>
<div class="box" style="background:#777;">Fifth Box</div>
<div class="box" style="background:#888;">Sixth Box</div>
<div class="box" style="background:#999;">Seventh Box</div>

PS 在较慢的机器上，您可能会遇到一些平滑问题，因为这将是大量的动态计算，特别是如果您还要添加动画，请记住这一点。