Fixar este menu!

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Fixar este menu!

Mensagem por HelixMendix em 20/05/14, 08:10 am

  • Descrição:
Olá! Estou a ter alguma dificuldade em fixar este menu "header_bar" já utilizei o "fixed" e não obtive resultado

  • Informações:
Fórum:Rewtec.comVersão:PUNBB
Tipo:Erros diversosTags:Fixar,menu!



Última edição por HelixMendix em 26/05/14, 05:34 am, editado 1 vez(es)
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Fixar este menu!

Mensagem por iPrompt em 20/05/14, 08:31 am

Olá,

Tente adicionar este código na sua Folha de estilo CSS

Código:
#header_bar {
background: black url(http://ipbskinning.com/demoboard/public/style_images/sylopro/user_navigation.png) repeat-x!important;
position: fixed!important;
}

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Fixar este menu!

Mensagem por HelixMendix em 20/05/14, 08:40 am

Ja havia feito algo parecido e ficou bugado

avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Fixar este menu!

Mensagem por iPrompt em 20/05/14, 09:01 am

Olá,

Altere o código passado por este

Código:
#header_bar {
background: black url(http://ipbskinning.com/demoboard/public/style_images/sylopro/user_navigation.png) repeat-x;
text-align: right;
position: fixed!important;
min-width: 1400px!important;
}

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Fixar este menu!

Mensagem por Hancki em 20/05/14, 09:22 am

Olá!

Vamos usar algo mais criativo...
Use este JS investido em todas as páginas:
Código:
jQuery(function ($) {
    function fixHancki() {
        var $selectorHancki = $('#header_bar');
        if ($(window).scrollTop() > 100)
            $selectorHancki.css({
                'position': 'fixed',
                'top': '0px',
                'background': 'url(http://ipbskinning.com/demoboard/public/style_images/sylopro/background.png) repeat-x',
                'padding': '0',
                'text-align': 'right',
                'width': '100%',
                'z-index': '9999'
            });
        else
            $selectorHancki.css({
                'position': 'relative',
                'top': 'auto',
                'background': 'url(http://ipbskinning.com/demoboard/public/style_images/sylopro/user_navigation.png) repeat-x',
                'padding': '0',
                'text-align': 'right'
            });
    }
    $(window).scroll(fixHancki);
    fixHancki();
});

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Fixar este menu!

Mensagem por HelixMendix em 20/05/14, 09:44 am

Quakeline escreveu:Olá,

Altere o código passado por este

Código:
#header_bar {
background: black url(http://ipbskinning.com/demoboard/public/style_images/sylopro/user_navigation.png) repeat-x;
text-align: right;
position: fixed!important;
min-width: 1400px!important;
}

Até

Quase funcionou, mas eu acho que a barra tem um fundo tranparente e depois ao vir com o srcoll para baixo só fica visivel o avatar e as restantes coisas quando a barra por algo escuro. Mas ainda não está certo veja a imagem a baixo ainda está meio bugado




@Hancki escreveu:Olá!

Vamos usar algo mais criativo...
Use este JS investido em todas as páginas:
Código:
jQuery(function ($) {
    function fixHancki() {
        var $selectorHancki = $('#header_bar');
        if ($(window).scrollTop() > 100)
            $selectorHancki.css({
                'position': 'fixed',
                'top': '0px',
                'background': 'url(http://ipbskinning.com/demoboard/public/style_images/sylopro/background.png) repeat-x',
                'padding': '0',
                'text-align': 'right',
                'width': '100%',
                'z-index': '9999'
            });
        else
            $selectorHancki.css({
                'position': 'relative',
                'top': 'auto',
                'background': 'url(http://ipbskinning.com/demoboard/public/style_images/sylopro/user_navigation.png) repeat-x',
                'padding': '0',
                'text-align': 'right'
            });
    }
    $(window).scroll(fixHancki);
    fixHancki();
});

Hancki

Esse código funcionou Hancki porém eu queria evitar o maximo de JS preferia que fosse tudo em css Piscada

Obrigado
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Fixar este menu!

Mensagem por waghcwb em 25/05/14, 06:34 pm

Olá,

Entrei no fórum para ver como poderia ser feito o efeito, e a barra ja se encontra fixa...

Porque o senhor não clica em resolvido? Muito feliz

Ou ainda não conseguiu o que queria? (Ai eu fico confuso Envergonhado )
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum