クイックスクロールでjQueryスクロール機能を起動するにはどうすればよいですか？

Question

コンテナdivがページを上下にスクロールすると、「固定された」黄色のボックスを維持しようとしていますが、画面上のコンテナで上下に移動します。これは、スロースクロールでは機能しますが、高速スクロールでは機能しません。コードを速く確実に実行するために、または画面のスクロールをよりゆっくりと行うために、自分のコードにできることはありますか？

HTML：

<div id="container"> 
    <div id="purple"></div> 
    <div id="yellow"></div> 
    <div id="green"></div> 
</div> 

CSS：

#container{ 
margin-top:500px; 
margin-bottom:500px; 
height:1000px; 
width:600px; 
background-color:blue; 
position:relative; 
} 

#purple{ 
height:10px; 
width:10px; 
background-color:purple; 
position:absolute; 
margin-right:50px; 
} 
#green{ 
height:10px; 
width:10px; 
background-color:green; 
position:absolute; 
bottom:0; 
} 
#yellow{ 
width:100px; 
height:100px; 
background-color:yellow; 
margin-top:50px; 
position:absolute; 
left:0px; 
} 

のjQuery：

var distance = $('#purple').offset().top; 
var distance2 = $('#green').offset().top; 
$window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     $("#yellow").css("position","fixed"); 
     $("#yellow").css("margin-left",'8px'); 
     $("#yellow").css("top",'0px'); 
} 

if (($window.scrollTop() - distance <= 15)&& ($window.scrollTop() >= distance2 - 1000)) { 
     $("#yellow").css("position","absolute"); 
     $("#yellow").css("top","15px"); 
     $("#yellow").css("margin-left",'0px'); 
     $("#yellow").css("bottom","auto"); 

    } 

    if ($window.scrollTop() >= distance2 - 180 ) { 
     $("#yellow").css("position","absolute"); 
     $("#yellow").css("top","auto"); 
     $("#yellow").css("margin-left",'0px'); 
     $("#yellow").css("bottom",'40px'); 

    } 
    }); 

はここでフィドルです：https://jsfiddle.net/7nfyu4ys/1/

は、それは私のコードです、またはjQueryのは、単に動作しませんこれは時々？

Answer 1

正しい、あなたはしませんでしたが、私はとにかくサンプルをしました（ - ;を参照してください：

https://jsfiddle.net/jjkhgv18/

var distance = $("#purple").offset().top; //above yellow 
 
var distance2 = $("#green").offset().top + $("#green").height(); //below yellow 
 
var height = $("#yellow").height(); 
 
var margin = $("#yellow").css("top"); //space to give from top of purple and bottom of green 
 
$window = $(window); 
 

 
$window.scroll(function(e) { 
 
\t if ($window.scrollTop() >= distance2 - height - parseInt(margin,10)*2) { 
 
\t \t $("#yellow").css({"position":"absolute", "top":"auto", "bottom":margin, "left":"0"}); 
 
\t } else if ($window.scrollTop() >= distance) { 
 
\t \t $("#yellow").css({"position":"fixed", "top":margin, "left":$("body").css("margin-left")}); 
 
\t } else { 
 
\t \t $("#yellow").css({"position":"absolute", "top":margin, "bottom":"auto", "left":"0"}); 
 
\t } 
 
});

#container { 
 
    margin-top: 500px; 
 
    margin-bottom: 1500px; 
 
    height: 1000px; 
 
    width: 600px; 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 

 
#purple { 
 
    height: 10px; 
 
    width: 10px; 
 
    background-color: purple; 
 
    position: absolute; 
 
} 
 

 
#green { 
 
    height: 10px; 
 
    width: 10px; 
 
    background-color: green; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
#yellow { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    top: 50px; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="purple"></div> 
 
    <div id="yellow"></div> 
 
    <div id="green"></div> 
 
</div>

を問題には手計算についてほとんどでした - あなたの最初と3番目のifが有効ですが、実際は真ん中のものがデフォルトですが、2番目のものは3つのうちどれも真ではないので、cssは決してリセットされません。それは今働くようです。書式設定の方法私はちょうど単一のCSS関数とより自動化された値を求め、マージン設定を取り除き、#yellowのためにtopを使いました。