ウィンドウの高さより長いスクロールdivを停止する方法はありますか？

Question

#containerの内部（位置：相対）私は2つのdivがあります：両方とも50％幅で、＃最初は非常に背が高く（位置は相対）、＃2番目のものは少なくとも2000pxの高さです。

第2秒間にスクロールするのを止める方法はありますか？他のコン​​テンツはスクロールし続けますか？それのために余分な親Divを作っていないと素晴らしいだろう。 フィドル： - それのためのbrowser compatabilityが要件を満たしていることを必ず確認してくださいが、これを達成するためにhttps://jsfiddle.net/Moor/ha4zybpb/

#container{ 
 
    position:relative; 
 
} 
 
#first{ 
 
    width:50%; 
 
    background:#333; 
 
    height:10000px; 
 
} 
 
#second{ 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    width:50%; 
 
    height:2000px; 
 
    background:limegreen; 
 
}

<div id="container"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
</div>

Answer 1

一つの方法は、position:stickyを使用することです。

*{margin:0;padding:0;} 
 
#first{ 
 
    background:#333; 
 
    display:inline-block; 
 
    height:10000px; 
 
    vertical-align:bottom; 
 
    width:50%; 
 
} 
 
#second{ 
 
    background:linear-gradient(0deg,#f00,#090); 
 
    bottom:0; 
 
    display:inline-block; 
 
    height:2000px; 
 
    position:sticky; 
 
    vertical-align:bottom; 
 
    width:50%; 
 
}

<div id="container"><div id="first"></div><div id="second"></div></div>

Answer 2

これは完全な答えはありませんが、それはあなたの方法であなたを助けるかもしれない - スクロール位置とビューポートの高さを確認し、2番目の要素の高さにそれを比較 -

私の例ではこのフィドルをチェックしてください。 jqueryの

updated fiddle

$(document).ready(function() { 
console.log("ready!"); 
var secondHeight = $('#second').height(); 
console.log(secondHeight); 

var stopper = 0; 

$(window).scroll(function (event) { 
var scroll = $(window).scrollTop(); 
var viewportHeight = $(window).height(); 
    // Do something 
    console.log(scroll+viewportHeight); 



    if(secondHeight <= scroll+viewportHeight) { 
    console.log('stop it here'); 
    stopper = 1; 
    } else { 
    stopper = 0; 
    } 
    console.log(stopper); 

    if(stopper == 1) { 
    $('#second').css('position','fixed'); 
    console.log('making it fixed'); 
    } else { 
    $('#second').css('position','absolute'); 
    console.log('making it absolute'); 
    } 


    }); 


}); 

Answer 3

jqueryの "スティッキー" 溶液を用いて行われる。..

https://jsfiddle.net/cusjptLr/4/

var sh = $('#second').height(); 
$(window).scroll(function(){ 
    if (($(window).scrollTop() + $(window).innerHeight()) >= sh) { 
    $('#second').addClass("sticky"); 
    } 
}); 

#second.sticky { 
    position: fixed; 
    bottom: 0; 
    top: initial; 
}