Conteúdo pegajoso redefine a página quando deveria ficar? - javascript, jquery, html, css

Eu tenho uma seção de conteúdo filtrável que eu gostaria de ficar no topo quando você rolar para ele.

+------------------+
|                  |
|      HEADER      |
+------------------+ <--- WHEN THIS IS COVERED BY TOP OF BROWSER WINDOW (SCROLLED UP)
|                  | <--- THIS BECOMES FIXED TO TOP AND SCROLLABLE
|                  |
|      STICKY      |
|      CONTENT     |
+------------------+

A partir de agora, a seção de cabeçalho será quase oculta do pergaminho, então ele irá piscar e redefinir a rolagem para o topo. Não tenho certeza do que poderia estar fazendo isso.

Quanto a HTML o único <div> você deve se preocupar é #sticky e .whole-page-container os dois são sinônimos, chamados de maneira diferente. #sticky é usado no jQuery função e .whole-page-container é usado para o CSS.

CSS:

.whole-page-container{
display: block;
position: relative;
height: auto;
width: 100%;
top: 0;
}
----------------------------

USED TO FIX THE CONTENT TO THE TOP (STICKY IT)
.stuck {
position: fixed;
top: 0;
}

JS

$(document).ready(function() {
var stickyNavTop = $("#sticky").offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) {
$("#sticky").addClass("stuck");
} else {
$("#sticky").removeClass("stuck");
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

Também aqui está um link para o exemplo de trabalho: EXEMPLO

Obrigado pela ajuda!

EXEMPLO PICTÓRICO

Então, se esta é a página atual quando você carrega o #RED A seção será rolável, enquanto você rola a página, ela se moverá com ela.

Depois de chegar a este ponto, onde o #BLUE seção está no topo, gostaria que esta seção azul para corrigir o topo para que você possa percorrer o conteúdo.

Respostas:

Descobri isso.

Eu encaixei minha corrente .whole-page-container noutro <div>. Deu o mais exterior div a classe .whole-page-container e deu o segundo exterior mais div (obviamente .whole-page-container o div de sticky.

Removido position:fixed e substituído por position:static.