スクロールの2つの点の間のdivの固定位置

Question

私は7つのボックスを持っています。まずbox1をスクロールしたい。 box2がビューポートの上部に達すると、この例の場合と同じに固定する必要があります。私はアニメーション（アニメーションは、表示/非表示など）いくつかのビューを何度も何度もbox2をスクロールしなければならない場合があります（2つのウィンドウの高さまたはXのピクセルの高さ）。アニメーションが完了したら、固定位置を削除し、残りのボックスを通常通りにスクロールする必要があります。どんな助け？ここ

[Iは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'); 
 
    \t } 
 
    else{ 
 
    \t $('.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を相対的に配置し、固定されたボックスの移動距離を私の例では、あなたは上記の例のようにjavascriptでこの高さを追加したい場合は、CSSで300vhを与えます）。次に、ウィンドウが相対的に配置された親ボックスの一番上に来たら、ボックスを修正したいと思うでしょう。そうすれば、必要な距離を移動するときに、別のクラスを追加することができます。固定されたボックスには、相対位置の親ボックスの下部に配置された絶対位置を再度指定します。これには2つのif文が必要です。また、親ボックスと固定ボックスの高さを計算する必要があります。次に、ウィンドウの上部が固定ボックスホルダーの上部に当たったら、固定クラスを追加し、スクロール位置が固定ボックスホルダーの高さから固定ボックスの高さを差し引いたときに別のクラスをそのdivの底に貼り付けることができます。あなたの質問を誤解している場合は、以下のコメントに私に連絡してください。

私が知っているように、ここで混乱しているかもしれないので、ここでそれは私が仕上げたフィドルと共に行動しています。低速のマシン上

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これはあなたのようにアニメーションを追加しようとしている場合は特にその場で計算の多くであるように、あなたは滑らかで、いくつかの問題が発生する可能性がありよく考えてみてください。