Navbar sticky com erro
Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript & jQuery
Página 2 de 2 • Compartilhe •
Página 2 de 2 • 1, 2
Navbar sticky com erro
Relembrando a primeira mensagem :
Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3
Olá!
Estava a seguir este tutorial:
- http://help.forumotion.com/t143777-make-your-navbar-sticky
E usei a .CSS:
jS.:
Só que apenas aparece sempre assim:

Ou seja não aparece o menu mesmo que clique não aparece o menu de navegação, solução?
Detalhes da questão
Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3
Descrição
Olá!
Estava a seguir este tutorial:
- http://help.forumotion.com/t143777-make-your-navbar-sticky
E usei a .CSS:
- Código:
/* Menu POP */
#fa_sticky_nav {
font-size:0;
text-align:center;
background:#FAFAFA;
border-bottom:1px solid #CCC !important;
height:30px;
position:fixed;
right:0;
z-index:999;
overflow:hidden;
transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li { display:inline }
#fa_sticky_nav a.mainmenu {
color:#39C;
font-size:12px;
font-weight:bold;
font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
display:inline-block;
padding:0 10px;
height:30px;
line-height:30px;
transition:200ms;
}
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
background-position:0 25px;
}
#fa_sticky_toggle {
background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
border:1px solid #CCC;
border-right:none;
display:inline-block;
height:29px;
width:30px;
position:fixed;
right:0;
z-index:999;
transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
border-radius:0 !important;
border:1px solid #CCC;
border-right:0;
border-top:0;
}
.post div[style*="-30px;"] {
top:-60px !important;
}
jS.:
- 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();
});
});
}
});
}());
Só que apenas aparece sempre assim:

Ou seja não aparece o menu mesmo que clique não aparece o menu de navegação, solução?
Última edição por IsmaelS. em 26/11/15, 02:43 pm, editado 1 vez(es)
IsmaelS.- Usuário experiente
-
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096
Re: Navbar sticky com erro
hum,desculpe, esta no js... altere o js seu pra este:
- 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;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;z-index: 999999;top:0px;left: 60px"><li><a href="#" onclick="eutomateus(); return false;">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');
});
Slurk- Nível 10
- Inscrito dia : 23/11/2015
Mensagens : 273
Re: Navbar sticky com erro
Boa tarde!
Esqueci do seu tópico, me desculpe. Quando tentar com o código do usuário acima e caso não funcione, remova tudo que ele forneceu e deixe somente o meu último javascript, ok? Assim que fizer isso, me marque aqui para que eu efetue os testes e corrija.

Esqueci do seu tópico, me desculpe. Quando tentar com o código do usuário acima e caso não funcione, remova tudo que ele forneceu e deixe somente o meu último javascript, ok? Assim que fizer isso, me marque aqui para que eu efetue os testes e corrija.

MateusAnjosV- Membro do Fórum
- Inscrito dia : 16/10/2015
Mensagens : 1590
Re: Navbar sticky com erro
@MateusAnjosV não tem mal amigo, o código dele não resultou por isso coloquei o que estava:
- 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(); return false;">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');
});
IsmaelS.- Usuário experiente
- Inscrito dia : 24/11/2012
Mensagens : 2956
Re: Navbar sticky com erro
Certo, faça o seguinte: troque o último css que você aplicou do @Fraise, para esse:
Abraços!
- Código:
.semnome:before {content: "\f0c1"; font-family: fontawesome; color: #00A4CD;}
.semnome2:before {content: "\f005"; font-family: fontawesome; color: #00A4CD;}
#mateus, #mateus2 {padding: 0 10px;position: fixed; z-index: 999999; top: 0px; left: 100px; color: black !important; font-size: 15px !important; display: block; background-position: 35px 40px; max-width: 20px !important;} #mateus:hover, #mateus2:hover{background: url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 35px 27px !important; padding: 0 10px;transition: 200ms;height: 30px}
#mateus {margin-left: -50px}
#mateus2 {margin-left: -75px}
Abraços!
MateusAnjosV- Membro do Fórum
- Inscrito dia : 16/10/2015
Mensagens : 1590
Re: Navbar sticky com erro
@MateusAnjosV já ficou bem mas apenas esta a negrito ainda será possível deixar normal?
IsmaelS.- Usuário experiente
- Inscrito dia : 24/11/2012
Mensagens : 2956
Re: Navbar sticky com erro
No útimo CSS, procure por:

- Código:
color: #00A4CD;
- Código:
color: rgba(0, 164, 205, 0.48)

MateusAnjosV- Membro do Fórum
-
Inscrito dia : 16/10/2015
Mensagens : 1590
Pontos Ativos : 2170
Re: Navbar sticky com erro
Mas eu não quero mudar a cor amigo apenas quero colocar o ícone normal sem estar a negrito amigo.
IsmaelS.- Usuário experiente
-
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096
Re: Navbar sticky com erro
Veja, vou lhe provar uma coisa ok?
Olhe essas prints: http://prntscr.com/96ylmz / http://prntscr.com/96ym4c
Elas retratam o que eu quero dizer, note que, o font-weight: normal !important está declarado, ou seja, ele não está em negrito!
A cor do backgrond que usei foi: #39C, a anterior(#0474bf) é a cor do seu menu.
Olhe essas prints: http://prntscr.com/96ylmz / http://prntscr.com/96ym4c
Elas retratam o que eu quero dizer, note que, o font-weight: normal !important está declarado, ou seja, ele não está em negrito!
A cor do backgrond que usei foi: #39C, a anterior(#0474bf) é a cor do seu menu.
MateusAnjosV- Membro do Fórum
-
Inscrito dia : 16/10/2015
Mensagens : 1590
Pontos Ativos : 2170
Re: Navbar sticky com erro
@MateusAnjosV mas é estranho porque neste fórum:
http://help.forumotion.com/forum
Pode ver a diferença... E coloquei a cor e aparece como fosse a negrito
http://help.forumotion.com/forum
Pode ver a diferença... E coloquei a cor e aparece como fosse a negrito
IsmaelS.- Usuário experiente
-
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096
Re: Navbar sticky com erro
Bom dia!
Erro encontrado, isso deve resultar:
Erro encontrado, isso deve resultar:
- Código:
.semnome:before { content: "\f0c1";
font-family: fontawesome;
color: #39C;
font-size: 14px;
text-rendering: auto;
font-weight: normal !important;
font-style: normal !important;
}
.semnome2:before {
content: "\f005";
font-family: fontawesome;
color: #39C;
font-size: 14px;
text-rendering: auto;
font-weight: normal !important;
font-style: normal !important;
}
#mateus, #mateus2 {padding: 0 10px;position: fixed; z-index: 999999; top: 0px; left: 100px; color: black !important; font-size: 15px !important; display: block; background-position: 35px 40px; max-width: 20px !important;} #mateus:hover, #mateus2:hover{background: url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 35px 27px !important; padding: 0 10px;transition: 200ms;height: 30px}
#mateus {margin-left: -50px}
#mateus2 {margin-left: -75px}
MateusAnjosV- Membro do Fórum
-
Inscrito dia : 16/10/2015
Mensagens : 1590
Pontos Ativos : 2170
Re: Navbar sticky com erro
@MateusAnjosV o efeito ao passar o mouse e aparecer aquela barrinha por baixo dá para diminuir nos dois ícones? Só se der senão deixe estar.
E tem este problema ao fechar a barra eles ficam ali e o favoritos deixou de funcionar:

E tem este problema ao fechar a barra eles ficam ali e o favoritos deixou de funcionar:

IsmaelS.- Usuário experiente
-
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096
Re: Navbar sticky com erro
Bom dia!
Troque o js por esse:
Isso deve corrigir o botão "favoritos", verifique.
Troque o js por 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);
});
Isso deve corrigir o botão "favoritos", verifique.
MateusAnjosV- Membro do Fórum
-
Inscrito dia : 16/10/2015
Mensagens : 1590
Pontos Ativos : 2170
Re: Navbar sticky com erro
@MateusAnjosV agora só tem este problema veja, ao fechar a barra:


IsmaelS.- Usuário experiente
-
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096
Re: Navbar sticky com erro
Este não é um "fórum qualquer", e sim um fórum oficial Ismael. Existem alguns elementos no seu fórum que são "parcialmente", uma cópia dele quanto do Fdf PT. Tanto ele quanto qualquer fórum oficial de ajuda não deve ser copiado, ou OnlineGuardian pode intervir com avisos e expulsões do fórum.@IsmaelS. escreveu:@MateusAnjosV mas é estranho porque neste fórum:
http://help.forumotion.com/forum
Pode ver a diferença... E coloquei a cor e aparece como fosse a negrito


Bem-vindo ao Fórum dos Fóruns! |
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte. Antes de criar um tópico, verifique se sua questão já não foi respondida. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Shek — Ajudeiro |
Shek- Ajudeiro
-
Inscrito dia : 11/04/2009
Mensagens : 17433
Pontos Ativos : 21678
Re: Navbar sticky com erro
Apenas queria essa função mas se acha que é "plágio" de ter esses ícones como eles têm e a função, não seja por isso, dúvida resolvida e obrigado @MateusAnjosV!
IsmaelS.- Usuário experiente
-
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096
Re: Navbar sticky com erro
![]() | Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
MateusAnjosV- Membro do Fórum
-
Inscrito dia : 16/10/2015
Mensagens : 1590
Pontos Ativos : 2170
Página 2 de 2 • 1, 2
Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript & jQuery
Página 2 de 2
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum