Make a Div Scroll When I Reach a Certain Point

Scroll page to a certain point then start scrolling a div's overflow content using only one scrollbar

You can do it using the scrollTop property of your elements. First you'd need to determine where your header ended (the point to scroll your window to):

var header = $('#header');
var headerBottom = header.offset().top + header.height();

Then you could animate your window's scrollbar to this position:

$(window).animate({scrollTop: headerBottom});

Once that was taken care of, you would then get a reference to whichever element you wanted to then scroll by and animate its scrollTop position (same code as snippet above that scrolls the window).

Finally you would need a scroll event handler so you could determine when it was time to change which element you were scrolling the content by:

$(window).scroll(function(){
    // logic to determine which element should be scrolling
});

Scrolling with div to certain point

You can use multiple multiple ternary operator to define which position do you want to stop at. This example have 2 point of stop, between stopTop 1 and stopTop 2. If scrollTop reach the stopTop1 then it will freeze on that position until scroll top pass the stopTop2 :
top : scrollTop < originalY ? 0 : scrollTop > stopTop1 && scrollTop < stopTop2 ? stopTop1 : scrollTop - originalY + topMargin

Here the the code that you can try :
myjsfiddle

Scrolling a DIV to Specific Location

Something like this http://jsfiddle.net/X2eTL/1/:

// On document ready
$(function(){
    // Find selected div
    var selected = $('#container .selected');
    // Scroll container to offset of the selected div
    selected.parent().parent().scrollTop(selected[0].offsetTop);
});

Without the jQuery (put this at the bottom of the < body > tag:

// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;

demo: http://jsfiddle.net/66tGt/

How to make a div scroll when I scroll after certain point?

[Working demo]

var el  = $("#sticky");
var win = $(window);
var width  = el.width();
var height = el.height();
var win_height = $(window).height();

window.onscroll = function() {
  var offset = el.offset().top + height - win_height;
  if ( win.scrollTop() > offset ) {
    window.onscroll = function() { 
      el.css({
        width: width,
        position: "absolute",
        top: win.scrollTop() + win_height - height
      });
    };  
  }
};

If you don't need to support IE based browsers you can use:

position: "fixed"
bottom: 0

Making a div appear after certain point AND disappear after other certain point

It's blinking because both of your if statements are true. So it is trying to fade in and fade out at the same time.

I updated your fiddle to only fade in if you are between the two divs.

I changed it so it first checks if it is above the first div. If it is, then the special div is hidden. If you have scrolled past the first div, it then checks the position relative to the second div and shows or hides it.

So your code looks like:

$(document).ready(function() {

    $("#DIV1").hide(); //hide your div initially

    var topOfOthDiv1 = $("#DIV2").offset().top;
    var topOfOthDiv3 = $("#DIV3").offset().top;

    $(window).scroll(function() {
        if($(window).scrollTop() < topOfOthDiv1)
        {
             $("#DIV1").fadeOut(200); //reached the desired point -- show div
        }
        else
        {
            if($(window).scrollTop() < topOfOthDiv3) { //scrolled past the other div?
                $("#DIV1").fadeIn(200); //reached the desired point -- show div
            }
            else if($(window).scrollTop() > topOfOthDiv3) { //scrolled past the other div?
                $("#DIV1").fadeOut(200); //reached the desired point -- show div
            }
        }
    });

});

How can I make a div stick to the top of the screen once it's been scrolled to?

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.