Stop div scrolling once it reaches another div

Question

Basically I currently have a div which stays fixed and follows the user down as they scroll until it reaches a certain point. I can easily make it stop at a fixed pixel posi

Answer 1

Inspired by MicronXD's fiddle, but written to be more flexible when the DOM is getting pushed around a lot on document load (or other reasons), here's another similar solution I developed for my own usage:

jQuery.fn.extend({
  followTo: function (elem, marginTop) {
    var $this = $(this);
    var $initialOffset = $this.offset().top;
    setPosition = function() {
      if ( $(window).scrollTop() > $initialOffset ) {
        if ( elem.offset().top > ( $(window).scrollTop() + $this.outerHeight() + marginTop ) ) {
          $this.css({ position: 'fixed', top: marginTop });
        }
        if ( elem.offset().top <= ( $(window).scrollTop() + $this.outerHeight() + marginTop ) ) {
          $this.css({ position: 'absolute', top: elem.offset().top - $this.outerHeight() });
        }
      }
      if ( $(window).scrollTop() <= $initialOffset ) {
        $this.css({ position: 'relative', top: 0 });
      }
    }
    $(window).resize( function(){ setPosition(); });
    $(window).scroll( function(){ setPosition(); });
  }
});

Then you can run the function as such:

$('#div-to-move').followTo( $('#div-to-stop-at'), 60);

60 is the optional margin you want the floating element to have from the top of the screen when in position: fixed, expressed in pixels.

Answer 2

Is this what you were looking for?

http://jsfiddle.net/Tgm6Y/1447/

var windw = this;

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

EDIT: about your request to not scroll until a certain point, just replace this:

if ($window.scrollTop() > (bumperPos - thisHeight)) {

with this:

if ($window.scrollTop() <= (bumperPos - thisHeight)) {