Como fazer div meio agindo como um cabeçalho posicionado fixo quando div médio ir para o lugar superior por rolagem do mouse - jquery, css

Eu tenho alguma seção. Let eles são:

1. Cabeçalho (Conteúdo da altura média)
2. Seção restante (Conteúdo da pequena altura)
3. Conteúdo (Conteúdo de altura extra grande)

Vamos deixar toda a seção visível no começo. Conteúdo seção é Extra grande, podemos ver uma parte dessa seção em primeiro lugar. O comportamento normal dos navegadores são:

Se rolarmos o mouse um pouco, alguma parte do Cabeçalho seção estará desaparecendo e um pouco mais de parte Conteúdo seção será visível. Se nós rolamos o mouse mais, Cabeçalho será completamente desaparecido e mais uma parte do Conteúdo será visível. Agora, Seção restante está no topo, pois o Header desapareceu por descer o mouse. Então, a parte visível da página da Web é:

1. Seção restante
2. Conteúdo

Se nós rolamos o mouse mais, Seção restante será desaparecido também e apenas parte visível é agora Conteúdo seção.

Esses são o comportamento normal dos navegadores. Agora estou tentando fazer isso:

Quando, Cabeçalho seção será desaparecida rolando o mouse, Seção restante terá lugar de cabeçalho e definido para a posição de topo (Ainda está em comportamento normal). Naquela época, Seção restante será position: fixed em que posição superior e age como um cabeçalho fixo. Então, quanto rolamos o mouse e percorremos toda a parte do conteúdo, Seção restante será visível o tempo todo nessa posição superior. Eu acho que, apenas com CSS, não será possível. Porque, se eu aplicar:

.remaining {
position: fixed;
top: 600px;
}

Ele estará em posição intermediária o tempo todo. Mas, eu quero que isso seja consertado na posição de topo quando Cabeçalho seção desapareceu no momento da rolagem do mouse. Mais uma vez, quando rolar o mouse muito tudo deve agir como normal como Cabeçalho visível e Seção restante vá para o abaixo Cabeçalho Então, esse tipo de CSS não me ajuda.

Então, como posso definir a Seção Remanescente fixa ao desaparecer do cabeçalho e redefinir tudo ao aparecer o cabeçalho, rolando o mouse?

Aqui é meu violino

Respostas:

1 para resposta № 1

Uma solução elegante por Guil Hernandez atenderia perfeitamente às suas necessidades.

Adicione uma única classe ao seu CSS:

.remaining-scrolled {
top:0;
position:fixed;
width:100%;
}

E adicione apenas algumas linhas de jQuery:

var  mn = $(".remaining");
mns = "remaining-scrolled";
hdr = $("#header").height();

$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});

E seu efeito é alcançado. Aqui é um demonstração ao vivo.

---