2

Estou tentando deixar este menu fixo https://jsfiddle.net/40ouwkcw/ a partir de determinada rolagem da página, neste caso, após a imagem inicial. Encontrei vários tutoriais no google, mas nenhum funciona no menu. Eu até tentei os perguntados aqui e também nada.

É difícil achar um menu igual o meu, e a maioria dos tutoriais são pra menus que comecem dentro de uma nav mas o meu começa em uma div talvez isso esteja influenciando em algo.

Enfim. Se puderem dá uma olhada e me ajudarem, ou me indicarem um site com um tutorial que você ache que vai se adequar ao meu, agradeço, pois todos que tentei não funcionaram.

1 Resposta 1

2

Ok, faça assim:

Adicione um identificador à sua <img>:

HTML

<img class="imgTopo" src='https://static.cineclick.com.br/sites/adm/uploads/banco_imagens/31/602x0_1439644246.jpg'/>

Criamos em CSS propriedades para uma classe que a #navbar vai ter quando o scroll for abaixo da imagem:

.fixed-menu {
   position:fixed;
   background:red;
   width:100% !important;
   z-index:9999;
   top:0;
   left:0;
}

E por fim JQUERY:

(function($, sr) {

     alturaImg = $('.imgTopo').height(); // altura da imagem, vai servir para sabermos a altura que o scroll tem de andar até a navbar ficar fixa
     $(window).on('scroll', function() { // cada vez de que fizer scroll o que está dentro desta função vai acontecer
          if($(window).scrollTop() >= alturaImg) { // se o que percorremos com o scroll for maior ou igual à altura da imagem adicionamos esta classe à navbar
              $('#navbar').addClass('fixed-menu');
          }
          else {
              $('#navbar').removeClass('fixed-menu');
          }
     });
....

Usando o seu exemplo, aqui está o jsfiddle

1
  • me desculpe mas eu não expliquei direito, eu mudei o link lá em cima, porque eu deveria ter colado alguma foto antes do menu, porque eu quero que ao passar por essa foto, o menu fique fixo. Commented 19/05/2016 às 9:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .