JScript

Programação & Desenvolvimento


Mudar header ao rolar a página

waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Mudar header ao rolar a página Empty Mudar header ao rolar a página

Mensagem por waghcwb em Qui 28 Nov 2013, 2:31 pm

Olá amigos, estou desenvolvendo uma página HTML que deverá ter o seguinte efeito, ao rolar a página o header dela sera trocado.

Vejam

Header padrão
Mudar header ao rolar a página XZdVOcA

Header ao rolar a página
Mudar header ao rolar a página ZmACvJB
(será atualizado ainda)

Estou usando o seguinte código para obter o efeito
Código:
jQuery(document).scroll(function() {
   var fixed = false;
    if( jQuery(this).scrollTop() > 100 ) {
        if( !fixed ) {
            fixed = true;
            jQuery('#scroll_header').slideDown(600);
            jQuery('header').slideUp(500);
            
        }} else {
        if( fixed ) {
            fixed = false;
            jQuery('#scroll_header').slideUp(600);
            jQuery('header').slideDown(500);
        }}
});
Porém só consigo o efeito ao rolar a página para baixo, quando ela volta ao topo deveria fazer o processo inverso escondendo o "header ao rolar" e mostrar o "header padrão".

Sabem onde estou errando? Ou podem me ajudar aqui? Fico grato Very Happy



The quieter you become, the more you are able to hear

Mudar header ao rolar a página Btn_viewmy_160x25_pt_BR



study
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Mudar header ao rolar a página Empty Re: Mudar header ao rolar a página

Mensagem por JScript em Qui 28 Nov 2013, 7:18 pm

Olá amigo!

Eu não testei a mudança que fiz, mas seguindo a lógica, talvez funcione:
Código:

jQuery(document).scroll(function() {
    var fixed = false;
    if( jQuery(this).scrollTop() > 100 ) {
        if( !fixed ) {
            fixed = true;
            jQuery('#scroll_header').slideDown(600);
            jQuery('header').slideUp(500);
        } else {
            fixed = false;
            jQuery('#scroll_header').slideUp(600);
            jQuery('header').slideDown(500);
        }
    } else {
        if( fixed ) {
            fixed = false;
            jQuery('#scroll_header').slideUp(600);
            jQuery('header').slideDown(500);
        } else {
            fixed = true;
            jQuery('#scroll_header').slideDown(600);
            jQuery('header').slideUp(500);
        }   
    }
});
Testa e nos dê um retorno,

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Mudar header ao rolar a página Empty Re: Mudar header ao rolar a página

Mensagem por waghcwb em Sex 29 Nov 2013, 11:14 am

Olá, sem exito amigo :/
Mudar header ao rolar a página 6dfcRZg



The quieter you become, the more you are able to hear

Mudar header ao rolar a página Btn_viewmy_160x25_pt_BR



study
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Mudar header ao rolar a página Empty Re: Mudar header ao rolar a página

Mensagem por JScript em Sab 30 Nov 2013, 4:52 pm

Ok, farei testes reais em seu fórum e retorno quando concluir!

Até mais,

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Mudar header ao rolar a página Empty Re: Mudar header ao rolar a página

Mensagem por waghcwb em Seg 02 Dez 2013, 9:03 am

Olá JS
Está página não é no meu fórum em si, é em um fórum de design onde eu sou Moderador
Aqui está o link
http://www.foxdesigner.biz

Caso deseje os códigos da página, me avise que eu posto ou mando por MP



The quieter you become, the more you are able to hear

Mudar header ao rolar a página Btn_viewmy_160x25_pt_BR



study
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Mudar header ao rolar a página Empty Re: Mudar header ao rolar a página

Mensagem por JScript em Seg 02 Dez 2013, 9:21 am

Olá!

Agora ficou bem mais fácil resolver, fique tranquilo!

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...



Conteúdo patrocinado

Mudar header ao rolar a página Empty Re: Mudar header ao rolar a página

Mensagem por Conteúdo patrocinado


    Data/hora atual: Qui 14 Nov 2019, 5:17 pm