fixed menu with jquery on certain scrolling (scroll) of the page

Question

I’m trying to keep this menu fixed https://jsfiddle.net/40ouwkcw/ from a certain scrolling of the page, in this case after the initial image. I found several tutorials on google, but none works in the menu. I even tried the ones asked here and also nothing.

It’s hard to find a menu like mine, and most tutorials are for menus that start within a Nav but mine starts in a div maybe this is influencing something.

Finally. If you can take a look and help me, or refer me to a site with a tutorial that you think will suit mine, I appreciate it, because everyone I tried didn’t work.

Answer 1

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 create CSS properties for a class that #navbar will be when the scroll is 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 the jsfiddle