javascript - 固定滚动两点之间的 div 定位

Question

我有七个盒子。首先我想正常滚动 box1。当 box2 到达视口(viewport)的顶部时，它应该像示例中一样固定。当我一次又一次地在 box2 上滚动时(可能是两个窗口高度或 X 像素高度)，我必须对一些 View 进行动画处理(动画可能是显示/隐藏等)。动画完成后，我需要移除固定定位并开始正常滚动剩余的框。有帮助吗？

[我可能会在滚动时再次对 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 的底部。如果我误解了你的问题，请在下面的评论中告诉我。

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

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 在较慢的机器上，您可能会遇到一些平滑度问题，因为这将是大量的即时计算，特别是如果您还打算添加动画，所以请记住这一点。