Menu rolante fa_sticky

2 participantes

Ir para baixo

Tópico resolvido Menu rolante fa_sticky

Mensagem por Mariana Munroe 10.08.16 23:40

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?
Mariana Munroe
Mariana Munroe
**

Membro desde : 31/07/2012
Mensagens : 78
Pontos : 146

http://universomeiosangue.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por while 10.08.16 23:46

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

Seu menu já está fixado no topo.

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por Mariana Munroe 10.08.16 23:51

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.
Mariana Munroe
Mariana Munroe
**

Membro desde : 31/07/2012
Mensagens : 78
Pontos : 146

http://universomeiosangue.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por while 10.08.16 23:55

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: https://ajuda.forumeiros.com/t105812-menu-rolante-estilo-ao-do-fdf#738480

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por Mariana Munroe 11.08.16 0:14

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?
Mariana Munroe
Mariana Munroe
**

Membro desde : 31/07/2012
Mensagens : 78
Pontos : 146

http://universomeiosangue.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por while 11.08.16 0:20

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?
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por Mariana Munroe 11.08.16 0:42

Continua aparecendo o menu em cima
Mariana Munroe
Mariana Munroe
**

Membro desde : 31/07/2012
Mensagens : 78
Pontos : 146

http://universomeiosangue.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por while 11.08.16 16:49

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.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu rolante fa_sticky

Mensagem por while 15.08.16 3:15

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.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos