div元素应向下滚动，直到与另一个元素接触为止

Question

I've an div element #1 which stick on top the screen while scrolling. Thats working so far. Now further down on the page there is another element #2 and the element #1 should stop scrolling when it gets in contact with #2. To illustrate the scenario I made a sick picture with my paint skills.

Do somebody have an idea how to do it?

Answer 1

$el1.offset().top + $el1.outerHeight();

this will give you the bottom position of first div. Now When you scroll check if taht bottom position of first div is less than top position of second div. if it is less its ok but if it is greater than you can do whatever you want with first div. You can hide it on make its position absolute.

$(window).scroll(function(){
var bott = $el1.offset().top + $el1.outerHeight();
   if(bott > $el2.offset().top){
   $el1.css('display','none');
   // OR
   $el1.css('position','absolute');
  }
});

hope this helps