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。如果我误解了您的问题，请在下面的评论中告诉我。

好的，所以我知道这可能有点令人困惑，所以在这里，它与我努力的小提琴一起行动。

Fiddle Demo

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

固定两个滚动点之间div的定位

1 个答案: