CODEWITHSUNDEEP
csssticky
Demuri Celidze
Demuri Celidze

Reputation: 615

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

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>

Upvotes: 2

Views: 2338

Answers (3)

Shaggy
Shaggy

Reputation: 6796

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>

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362420

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;
}

Upvotes: 1

Stender
Stender

Reputation: 2492

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');
  }


    });


});

Upvotes: 0

Related Questions