menu not fixed when scrolling the page

Question

menu not fixed when scrolling the page

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I want my menu to be fixed as soon as it reaches the top of the page but I'm not getting any success with it. I do not know where I'm going wrong, 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>

The css menu plus the 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

asked by anonymous 11.06.2015 / 15:36

2 answers

0

I think your answer is at this link here, but in any case look at the ".fix"

    .fixar {
    position:fixed;
    margin-top: 0px !important;
}

How to set a "horizontal menu" at the top of the window when scrolling the page?

Functional example:

Or just import the jquery into your code: <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

11.06.2015 / 15:45

Doubt to automate function in javascript JQPlot - Online Legend

score 2 · Accepted Answer

I've changed your code.

Switch 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');
     }
});

On these two lines below I take your element and get 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 page scroll has reached the top of the MENU. If yes, apply the class to set the menu at the top.

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

NOTE: And do not forget to import jQuery. I noticed in the comments that you did not do this. Use the LINK that other members passed you.