Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
7kgmlcdkv
 
iScroll
 
Matt Shultz
 
Harleen
 
Ketholy123
 
T1ag0
 
zHugh
 
PlayWillian
 
ranzatti
 

Quem está conectado
275 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 272 Visitantes :: 2 Motores de busca

7kgmlcdkv, soldado, uvmyyvpew

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Menu rolante fa_sticky

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

Resolvido Menu rolante fa_sticky

Mensagem por Mariana Munroe em 10/08/16, 07:40 pm

Detalhes da questão


Endereço do fórum: http://wickedacademy.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


O menu do meu fórum ele é sempre em cima da pagina, mas queria deixar ele centralizado em cima do banner e só ficar no topo da pagina quando descer a pagina e o menu tiver acabado de descer como aqui no fórum dos fóruns, mas como deixa ele assim?
avatar

Mariana Munroe
Nível 6

Feminino
Inscrito dia : 31/07/2012
Mensagens : 78
Pontos Ativos : 146

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

Resolvido Re: Menu rolante fa_sticky

Mensagem por while em 10/08/16, 07:46 pm

Olá autora, não entendi sua questão, poderia ser um pouquinho mais clara?

Seu menu já está fixado no topo.

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante fa_sticky

Mensagem por Mariana Munroe em 10/08/16, 07:51 pm

Eu queria ele com o mesmo efeito do menu daqui, do fórum dos fóruns, onde o menu só fica no topo da pagina quando desce a pagina.
avatar

Mariana Munroe
Nível 6

Feminino
Inscrito dia : 31/07/2012
Mensagens : 78
Pontos Ativos : 146

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

Resolvido Re: Menu rolante fa_sticky

Mensagem por while em 10/08/16, 07:55 pm

Ta certo, vamos por passos então, adicione esse código em sua folha de estilo css:
Código:
#page-footer, div.navbar, div.navbar ul.linklist {position:relative!important;}

Depois veja e aplique o que diz nessa mensagem: http://ajuda.forumeiros.com/t105812-menu-rolante-estilo-ao-do-fdf#738480

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante fa_sticky

Mensagem por Mariana Munroe em 10/08/16, 08:14 pm

Pronto, fiz passo a passo, mas o menu secundário aparece desde o começo um pedaço, como esconder ele todo para aparecer só depois que passar o menu?
avatar

Mariana Munroe
Nível 6

Feminino
Inscrito dia : 31/07/2012
Mensagens : 78
Pontos Ativos : 146

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

Resolvido Re: Menu rolante fa_sticky

Mensagem por while em 10/08/16, 08:20 pm

Troque o javascript com esse:

Código:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
 
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
 
 
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
   
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
   
      toggler : '30px'
    },
 
    activeOffset : {}, // active offset for the sticky nav
 
    visible : false, // sticky nav is visible
 
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
   
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
 
    animating : false, // sticky nav is animating
 
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
   
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
 
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
 
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
 
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
 
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
       
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
       
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
       
        document.body.appendChild(FA.Nav.toggler);
      };
     
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
   
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
     
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

function eutomateus(){
         
    if ($.browser.mozilla == true) {
        window.sidebar.addPanel(title, url, '');
      return false;
   
    } else if($.browser.msie == true) { 
        window.external.AddFavorite( url, title);
        return false;
   
    } else {
        alert('Pressione as teclas CTRL + D para adicionar aos favoritos.');
    }
 };

function mateus(){prompt('Copy the BBCode URL of this page ?','[url='+window.location.href+']'+document.title+'[/url]')};

$(document).ready(function(){
 var url = window.location; var title = "Master Publicitário";
 
 $('#fa_sticky_nav li:first-of-type').after('<div id="mateus" style="color: black !important;font-size: 15px !important;position: fixed;z-index: 999999;top:0px;float: left;left: 50px" onclick="mateus();"><li>BBCODE</li></div><div id="mateus2" style="color: black !important;font-size: 15px !important;position: fixed;z-index: 999999;top:0px;left: 100px"><li><a href="#" onclick="eutomateus();">FAVORITO</a></li></div>'); 
 
 $('#mateus, #mateus2').hide();
 setInterval(function(){
 
 if($(document).scrollTop() >= 219){
  $('#mateus, #mateus2').show();
 } else {
  $('#mateus, #mateus2').hide();
 }
 
 }, 255);
$('#mateus li').html('').addClass('semnome');
$('#mateus2 li').html('').addClass('semnome2');
$('#mateus2').click(eutomateus);
});

Resulta?
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante fa_sticky

Mensagem por Mariana Munroe em 10/08/16, 08:42 pm

Continua aparecendo o menu em cima
avatar

Mariana Munroe
Nível 6

Feminino
Inscrito dia : 31/07/2012
Mensagens : 78
Pontos Ativos : 146

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

Resolvido Re: Menu rolante fa_sticky

Mensagem por while em 11/08/16, 12:49 pm

Olá autora, estranho que não vejo esse erro.

Aqui está tudo normal, mas adicione esse código css pra ajustar um pouco melhor sua barra:
Código:
 #fa_sticky_nav {height:0px;}
        #fa_sticky_nav a.mainmenu:hover {color:black;}
        #fa_sticky_nav a.mainmenu {margin-top:-15px!important;}

Encontra-se resolvido sua questão?
Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante fa_sticky

Mensagem por while em 14/08/16, 11:15 pm

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3107
Pontos Ativos : 4515

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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