no fixed menu when scrolling the page

Asked

Viewed 434 times

1

I want my menu to stay fixed as soon as it reaches the top of the page but I’m not succeeding with that I do not know where I am missing follow my code below:

 <script type="text/javascript">
            $(window).scroll(function(){
                valor_atual = $(document).scrollTop(); 
                var div = $(".menu-header");
                if (valor_atual >= 200){
                div.addClass("fixar");}
                else {
                div.removeClass("fixar");}
            });
        </script>

<header>
            <div id="video">
                <video id="Video1" class="bgvid" loop muted>
                    <source src="video/animacao-lol.mp4" type="video/mp4" />
                    desculpe mais seu navegador não suporta este formato ou esta desatualizado :(
                </video>
            </div>
            <div id="bg-video"></div>

            <div class="texto-header">
                <h1>Olá amigos somos a <strong>Tec Mov !</strong></h1>
                <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque. <br>Cras sit amet ligula 
                    ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
                 <button>Vamos Começar ?</button>
            </div>

            </header>

            <nav class="menu-header">
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Sobre</a></li>
                    <li><a href="#">Galeria</a></li>
                    <li><a href="#">Eventos</a></li>
                    <li><a href="#">Equipe</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>

Menu css plus fix:

   .menu-header{
        margin-top: 0px;
        position: absolute;
        top: auto;
        bottom: 0px;
        background-color: #fff;
        /*border-bottom: 5px solid #000;*/  
        box-shadow: 0 4px 8px -1px #d7d7d7;
        width: 100%;
        height: 80px;

    }

    .menu{
        margin: 30px auto;
        text-align: center;

    }

    .menu li{
        display: inline;
    }

    .menu li a {
        margin: 15px;
        color: #000;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 1.1em;
        transition:0.3s;
    }

     .menu li a:hover {
         font-weight: bold;
         transition:0.3s;
    }

.fixar{
    top: 0;
    left: 0;
    position: fixed;
}


    @import url(http://fonts.googleapis.com/css?family=Dancing+Script);
    @import url(http://fonts.googleapis.com/css?family=Scada);
    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
    html,
    body {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FDFDFD;
    }
    a {
      text-decoration: none;
      outline: none;
    }
    .text-center {
      text-align: center;
    }
    button {
      cursor: pointer;
      outline: none;
    }
    ul li {
      list-style-type: none;
    }
    header {
      position: relative;
      top: 0;
      overflow: hidden;
      width: 100%;
      height: 90%;
      min-height: 850px;
    }
    video {
      height: 760.4375px;
      width: 100%;
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform: scaley(1.72);
      -o-transform: scaley(1.72);
      -ms-transform: scaley(1.72);
      -moz-transform: scaley(1.72);
      transform: scaley(1.72);
      z-index: -2;
    }
    #bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../images/overlay.png);
      z-index: -1
    }
    .texto-header {
      position: absolute;
      top: 30%;
      left: 50%;
      margin-left: -280px;
      width: 600px;
      text-align: center;
      z-index: 2;
      color: #FFF;
    }
    .texto-header h1 {
      font-family: 'Dancing Script', cursive;
      font-size: 3.5em;
    }
    .texto-header p {
      /*font-family: 'Scada', sans-serif;*/
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1em;
      line-height: 20px;
    }
    .texto-header button {
      color: #fff;
      background: transparent;
      border: 2px solid #fff;
      width: 220px;
      height: 50px;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.2em;
      border-radius: 5px;
      margin-top: 5%;
    }
    .texto-header button:hover {
      color: #000;
      background-color: #fff;
    }
    .menu-header {
      margin-top: 0px;
      position: absolute;
      top: auto;
      bottom: 0px;
      background-color: #fff;
      /*border-bottom: 5px solid #000;*/
      box-shadow: 0 4px 8px -1px #d7d7d7;
      width: 100%;
      height: 80px;
    }
    .menu {
      margin: 30px auto;
      text-align: center;
    }
    .menu li {
      display: inline;
    }
    .menu li a {
      margin: 15px;
      color: #000;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.1em;
      transition: 0.3s;
    }
    .menu li a:hover {
      font-weight: bold;
      transition: 0.3s;
    }
    .fixar {
      z-index: 9999;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
    /********************************************************************************
                                    
                                    CORPO-1
                                    
*********************************************************************************/
    .barra {
      border: none;
      width: 25%;
      height: 2px;
      background-color: #000;
      margin-top: 2%;
    }
    .corpo-1 {
      margin-top: 10%;
      text-align: center;
      font-family: 'Source Sans Pro', sans-serif;
    }
    .corpo-1 > h1 {
      font-size: 1.5em;
      font-weight: bold;
    }
    .tamanho {
      -webkit-transform: scale(0.6);
      -o-transform: scale(0.6);
      -ms-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6);
      border: 5px solid #000;
      border-radius: 50%;
      padding: 10px;
    }
    .info h1 {
      margin-top: -3%;
      font-size: 1.5em;
    }
    .info p {
      line-height: 7px;
    }
    .info {
      text-align: center;
      margin-top: 5%;
    }
    .info li {
      display: inline;
      float: left;
      width: 33%;
      height: 380px;
    }
    #btn-info {
      margin-top: 7%;
      text-align: center;
      clear: both;
      background-color: transparent;
      border: 2px solid #000;
      width: 220px;
      height: 50px;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.1em;
      border-radius: 5px;
    }
    #btn-info:hover {
      background-color: #000;
      color: #fff;
    }
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Nova Era Team</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />

  <link rel="stylesheet" href="css/style-home.css" />
  <link rel="stylesheet" href="css/reset.css">

  <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
    $(window).scroll(function() {
      valor_atual = $(document).scrollTop();
      var div = $(".menu-header");
      if (valor_atual >= 600) {
        div.addClass("fixar");
      } else {
        div.removeClass("fixar");
      }
    });
  </script>
</head>

<body>
  <header>
    <div id="video">
      <video id="Video1" class="bgvid" loop muted>
        <source src="video/animacao-lol.mp4" type="video/mp4" />desculpe mais seu navegador não suporta este formato ou esta desatualizado :(
      </video>
    </div>
    <div id="bg-video"></div>

    <div class="texto-header">
      <h1>Olá amigos somos a <strong>Tec Mov !</strong></h1>
      <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
        <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
      <button>Vamos Começar ?</button>
    </div>

  </header>

  <nav class="menu-header">
    <ul class="menu">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Sobre</a>
      </li>
      <li><a href="#">Galeria</a>
      </li>
      <li><a href="#">Eventos</a>
      </li>
      <li><a href="#">Equipe</a>
      </li>
      <li><a href="#">Contato</a>
      </li>
    </ul>
  </nav>

  <section class="corpo-1">
    <h1>Quando precisar de algo<br />
	                conte conosco para...</h1>

    <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
      <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

    <img src="images/barra.png" class="barra">

    <ul class="info">
      <section class="section--blue wow bounceInLeft" data-wow-offset="300">
        <li>
          <img src="images/filmadora.png" alt="" class="tamanho" />
          <h1>Filmagem</h1>
          <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
          <p>Vestibulum at purus sed erat suscipit.</p>
          <p>Cras facilisis viverra wisi. Class sociosqu...</p>
        </li>
      </section>
      <section class="section--blue wow bounceInLeft" data-wow-offset="350">
        <li>
          <img src="images/camera.png" alt="" class="tamanho" />
          <h1>Fotografias</h1>
          <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
          <p>Vestibulum at purus sed erat suscipit.</p>
          <p>Cras facilisis viverra wisi. Class sociosqu...</p>
        </li>
      </section>
      <section class="section--blue wow bounceInLeft" data-wow-offset="450">
        <li>
          <img src="images/cifrao.png" alt="" class="tamanho" />
          <h1>Preços justos</h1>
          <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
          <p>Vestibulum at purus sed erat suscipit.</p>
          <p>Cras facilisis viverra wisi. Class sociosqu...</p>
        </li>
      </section>
    </ul>
    <p class="text-center">
      <button id="btn-info">Conheça mais sobre nós...</button>
    </p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>
    <p>teste</p>

  </section>

</body>

</html>

jquery html5 css3
  • 1

    Have you checked if you are actually adding the class: "fix"?

  • as well because I put it in my css and gave an addClass should not go ?

  • You made an "if" if it falls within the if condition that is to add, you debugged to check if it is really falling into the if and is adding the class.

  • so friend more like I can debug an html type I didn’t even know it gave because I already made an html project in an ide and even in it I couldn’t debug

  • Dear friend you will debug in your browser console, inside your "if" just above where you add the class put a console.log('dropped in if'); and this message will be displayed in your browser console!

  • I made here friend and nothing appeared

  • this error appears : Uncaught Referenceerror: $ is not defined

  • 1

    You imported the jQuery?

  • not the only thing that has jquery in my code and that’s what I posted and nothing else

  • Put this in your <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  • put friend and did not work : <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  • Same error appears on console?

  • GET file://C:/Users/Felipe.silva/Desktop/prototype/tecmov/ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js net::ERR_FILE_NOT_FOUND index.html:15 Uncaught Referenceerror: $ is not definedindex.html:15 (Anonymous Function)

  • @Kirito I already answered your question 30 minutes ago, you saw?

  • @Kirito put this in your code <script src="//code.jquery.com/jquery-migrate-1.2.1.min. js"></script> , Jquery must ALWAYS be the first import, before css and any other Javascript, it is not a rule, but it greatly mitigates this type of problem.

Show 10 more comments

2 answers

2


I changed your code.

Change your JS to:

var nav = $('.menu-header');
var num = $('.menu-header').offset().top;

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > num) {
         nav.addClass('fixar');
     }
     else {
         num = $('#outermainmenu').offset().top;
         nav.removeClass('fixar');
     }
});

In these two lines below I take your element and take the position of it. The menu.

var nav = $('.menu-header');
var num = $('.menu-header').offset().top;

Then in the lines below I check if the scroll of the page reached the top of the MENU. If yes, apply the class to fix the menu at the top.

Also in your CSS, I put a width:100% in class .fixar.

NOTE: And don’t forget to import jQuery. I noticed in the comments that you didn’t do it. Use the LINK that the other members gave you.

  • that would be the file that would have to import <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  • Exactly. Place it before closing the TAG body. And put your JS code in a separate file and import also below that line. Or put the code below that line.

  • 1

    thank you and "fuck"

0

  • 1

    I saw yes Roberto and thank you still yes I read the other example that you sent me and it did not work

  • If you use the Bootstrap framework you will not have this problem at all, or import jquery into your code correctly: '<script src="//code.jquery.com/jquery-migrate-1.2.1.min. js"></script>'

  • @Paulo Roberto da Silva so friend I will edit my post to v er like this my code currently

  • @Kirito put your full HTML and CSS code there for me to test here.

  • Ta ai friend looks got a bit messy there more on my screen ta all tidy then I will use media queries more I don’t know if I’m missing something

  • and just show off my little code I just posted

  • @Kirito Diego Souza has solved your problem, mark as an answer if it works for you and vote on the other answers that helped you.

Show 2 more comments

Browser other questions tagged jquery html5 css3

You are not signed in. Login or sign up in order to post.