fixed menu with jquery in certain page scrolling

Question

fixed menu with jquery in certain page scrolling

Navigation

#1 by (2 votes)

2

I'm trying to leave this fixed menu link from certain page scrolling, in this case, after the initial image. I found several tutorials on google, but none works on the menu. I even tried the ones asked here and also nothing.

It's hard to find a menu like mine, and most of the tutorials are for menus that start inside a nav but my starts in a div maybe this is influencing something.

Anyway. If you can take a look and help me, or tell me a site with a tutorial that you think will suit me, thank you, because everyone I tried did not work.

jquery rolamento menu

asked by anonymous 19.05.2016 / 09:06

1 answer

Assign value received from $ .ajax to the variable Select to bring specific record of an id

score 2 · Accepted Answer

Okay, do it like this:

Add an identifier to your <img> :

HTML

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

We have created CSS properties for a class that #navbar will have when scrolling below the image:

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

And finally 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');
          }
     });
....

Using your example, here is jsfiddle