我怎樣才能得到一個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>

的問題主要是關於人工計算 - 你第一個和第三個if是有效的，但真正的中間是默認的 - 但第二個是你遇到的情況，三個都不是真的，所以CSS不會被重置。我重新組織if語句現在它似乎工作。格式明智我只是去了單一的CSS函數和更多的自動化值，並刪除了邊距設置，並用於＃黃色的頂部。