[Tutorial] Menu fixo ao rolar a página

Nome do Arquivo: [Tutorial] Menu fixo ao rolar a página
Autor: Wagner
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins

Olá,

Ontem desenvolvi um código para a BS que deixa o menu fixo ao rolar a página, resolvi compartilhar com o pessoal ai, espero que seja útil..

Código JS



Código CSS


Fique atento a variável n mude ela para o ID do seu menu... O padrão da skin PunBB é o que está ali, mas alguns fóruns tem a edição nos templates e isso acaba mudando..

Código para outras versões:
phpbb2

phpbb3


Invision


Você pode adicionar quantas regras CSS preferir, ali só tem o básico que foi usado aqui na BS...

Abraços...

Let me see the code, thanks...

I love floating Navbars *-*

Postagem atualizada

Adicionei as outras versões de fóruns...

Ótimo code wagh! haha! você tinha outro, não tinha? que postou na punBB [Shadow]...

Hello!

Comentando para poder visualizar o código.

Até mais.

Olá,
Gostei. mas ja tenho o codigo há muito.

Até mais...

Realmente um ótimo recurso, parabéns Wagner'

Bem legal mesmo, to pensando em implementar no meu fórum..

Até mais ))

DeeW. escreveu:Ótimo code wagh! haha! você tinha outro, não tinha? que postou na punBB [Shadow]...

Tinha sim amigo, era bem semelhante a este, mas perdi ele kkk

Só reescrevi para por aqui, e achei que seria legal compartilhar com o pessoal...

Ótimo recurso. Irei utilizar.

Let me see the code, thanks

Olá,
Mim não funfa.

Até mais...

good work  .. wagner nice thanks for this

interessante vou testar, obrigado

Esse código ajuda muito para fóruns muitos compridos.
Parabéns pelo tutorial.

Como descubro o ID do meu menu??

Alexandre51 escreveu:Como descubro o ID do meu menu??

Alexandre51 escreveu:Como descubro o ID do meu menu??

Looks, this is the id:


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


But if you want i can help you, add this javascript:

Código:

/*
 // Fixed menu on scroll
 // This code will add a class to the menu on scroll, you just need to add a CSS rule on your stylesheet...
 // Author: Wagner ( /waghcwb )
 // Last update: 30/05/2014
 // © This work is free and you can modify or distribute it, but you need to keep this credits.
 */
//<![CDATA[
$(function(){
var w = $(window),
    n = $('#primary_nav'),
    s = function(){
            w.scrollTop() > 100 ? n.addClass('mf') : n.removeClass('mf');
        };
    w.scroll(s);
});
//]]>

And ADD THIS CSS:

Código:

.mf {
margin: 0px!important;
position: fixed!important;
top: 0;
right: 0;
left: 0;
z-index: 999;

/**** Personalization CSS ****/


-moz-border-radius: 4px;
background: #617e9c url(http://virteq.com/public/style_images/bulletin/branding_bg.png) repeat-x!important;
border-bottom: 0 solid #1b3759;
}


Final Resut:


If that you want?


And a demo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Parabens..

mindlezz escreveu:

Alexandre51 escreveu:Como descubro o ID do meu menu??

Alexandre51 escreveu:Como descubro o ID do meu menu??

Looks, this is the id:


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


But if you want i can help you, add this javascript:

Código:

/*
 // Fixed menu on scroll
 // This code will add a class to the menu on scroll, you just need to add a CSS rule on your stylesheet...
 // Author: Wagner ( /waghcwb )
 // Last update: 30/05/2014
 // © This work is free and you can modify or distribute it, but you need to keep this credits.
 */
//<![CDATA[
$(function(){
var w = $(window),
    n = $('#primary_nav'),
    s = function(){
            w.scrollTop() > 100 ? n.addClass('mf') : n.removeClass('mf');
        };
    w.scroll(s);
});
//]]>

And ADD THIS CSS:

Código:

.mf {
margin: 0px!important;
position: fixed!important;
top: 0;
right: 0;
left: 0;
z-index: 999;

/**** Personalization CSS ****/


-moz-border-radius: 4px;
background: #617e9c url(http://virteq.com/public/style_images/bulletin/branding_bg.png) repeat-x!important;
border-bottom: 0 solid #1b3759;
}


Final Resut:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

If that you want?


And a demo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Coloquei desta forma e nao resultou.. será que estou fazendo algo de errado?

Voy a probar, gracias

Alexandre51 escreveu:
Coloquei desta forma e nao resultou.. será que estou fazendo algo de errado?

You only have to add this javascript in all the pages:

Código:

/*
 // Fixed menu on scroll
 // This code will add a class to the menu on scroll, you just need to add a CSS rule on your stylesheet...
 // Author: Wagner ( /waghcwb )
 // Last update: 30/05/2014
 // © This work is free and you can modify or distribute it, but you need to keep this credits.
 */
//<![CDATA[
$(function(){
var w = $(window),
    n = $('#primary_nav'),
    s = function(){
            w.scrollTop() > 100 ? n.addClass('mf') : n.removeClass('mf');
        };
    w.scroll(s);
});
//]]>

After doind that, add this CSS Code:

Código:


.mf
{
margin: 0px!important;
position: fixed!important;
top: 0;
right: 0;
left: 0;
z-index: 999;

/*** CSS Personalization ***/
background: #617e9c url(http://i.imgur.com/yO0Yiq9.png) repeat-x!important;
border-bottom: 0 solid #1b3759;
}

Alexandre51 escreveu:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Crie um tópico na área de pedido de códigos, obrigado.