Как остановить прокрутку в конце заголовка и продолжить прокрутку содержимого?

Question

Сегодня я смотрел несколько видеороликов на YouTube, когда я действительно заметил макет сайта. Я хотел бы знать, как это можно сделать. Я хотел бы достигнуть следующий макет сайта:

• В конце заголовка страницы останавливается прокрутки и прокрутка только имеет влияние на содержание.

• Я хотел бы, чтобы боковая панель сохраняла одно и то же положение и всегда была видна с правой стороны.

• Я хотел бы указать, что я не имею в виду полосу прокрутки в своем содержании, и если мое объяснение не имеет смысла, посмотрите на домашнюю страницу youtube или на этом сайте http://www.squarespace.com/press-releases/.

Я предполагаю, что необходим javascript или jQuery и надеюсь, что вы, ребята, можете дать мне толчок в правильном направлении. Я был бы очень признателен, если вы, ребята, скажете мне, что мне нужно использовать для достижения этого эффекта.

Заранее спасибо.

EDIT: Я заметил, что эффект в YouTube виден только тогда, когда я использую Opera браузер другой веб-сайт с тем, что я имею в виду http://www.squarespace.com/press-releases/

Answer 1

вы можете сделать это с помощью JQuery

$(window).scroll(function(){ 

    var scrolled = $(window).scrollTop(); 

    //if window is scrolled past the height of the header (in my case 200px), execute code 
    //or you could do this dynamically by saying scrolled > $(".header").height(); 
    if(scrolled > 200){ 

     $(".left").css({"position":"fixed"}); 

    }else{ 

    $(".left").css({"position":"inherit"}); 

    } 
}); 

JSFIDDLE

И FYI страница не останавливает прокрутку, боковая панель только фиксируется на странице.