How to stop scrolling div which is longer than window height? - css

Question

Inside of #container (position:relative) I have 2 divs: both are 50% wide, the #first one is very tall (position:relative) and the #second one is at least 2000px tall.
Is there any way to make #second stop scrolling when it's bottom reached, but keep scrolling the other content? Would be great without making extra parent div for it.
Fiddle: 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

A jquery "sticky" solution..
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;
}

Answer 2

One way to achieve this would be to use position:sticky - although please be sure to check that the browser compatability for it meets your requirements.
*{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 3

This is not a complete answer, but it might help you on your way -
check the scroll position and viewport height, and compare it to the height of the second element -
check this fiddle for my example. done with 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');
}
});
});