¿El contenido fijo restablece la página cuando se supone que se pega? - javascript, jquery, html, css

Tengo una sección de contenido filtrable que me gustaría mantener en la parte superior cuando se desplaza hacia ella.

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

A partir de ahora, la sección del encabezado estará casi oculta del desplazamiento, luego parpadeará y restablecerá el desplazamiento a la parte superior. No estoy realmente seguro de lo que podría estar haciendo.

Como para HTML lo único <div> usted debe tener que preocuparse es #sticky y .whole-page-container Los dos son sinónimos, simplemente llamados de manera diferente. #sticky se usa en el jQuery función y .whole-page-container se usa para el 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();
});
});

También aquí hay un enlace al ejemplo de trabajo: EJEMPLO

¡Gracias por la ayuda!

EJEMPLO PICTORIAL

Así que si esta es la página actual cuando carga los #RED La sección será desplazable, a medida que se desplaza por la página, ésta se moverá con ella.

Una vez que llegue a este punto, donde el #BLUE La sección está en la parte superior, me gustaría que esta sección azul se fije en la parte superior para que pueda desplazarse por el contenido.

Respuestas

Lo averigué.

Incrusté mi corriente .whole-page-container en otro <div>. Dio lo más externo div la clase .whole-page-container y dio la segunda más externa div (por supuesto .whole-page-container el div de sticky.

Remoto position:fixed y reemplazado con position:static.