-1

Tengo un menú creado con css y jQuery esta conformado con dos div: el primer div va a contener número de contacto y otros, el segundo div va a contener el menú de navegación.

El segundo div va a ser el div fijo, hasta aquí lo he logrado bien pero no me agrada mucho al bajar porque tiene un estilo como si se trancara.

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 40) $('#menu').addClass("fixed").fadeIn();
    else $('#menu').removeClass("fixed");
  });
});
#menu {
  background-color: rgba(0, 0, 0, 0.1);
  height: 72px;
  width: 1349px;
}

.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 10000;
}

#area {
  height: 800px;
}

#nav {
  height: 24px;
  width: 1349px;
  background: #fbfbfb url(../img/grad.png) center top repeat-x;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

li {
  list-style: none;
}

.nav-user {
  float: right;
  padding: 10px 210px 0px 10px;
}

.shop-phone {
  float: left;
  padding: 15px 0px 0px 80px;
  line-height: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div id="nav">
    <div class="shop-phone"><i class="icon-phone2"></i> 0123-456-789</div>
    <div class="nav-user">
      <!--<a href="cart.php"><i class="icon-cart"></i><span class="badge">0</span></a>-->Iniciar sesión</div>
  </div>
  <div id="menu">

  </div>
  <div class="slide">
    <div class="slider-container">
      <ul id="slider" class="slider-wrapper">
        <li class="slide-current"><img src=""></li>
        <li><img src=""></li>
      </ul>
      <ul></ul>
    </div>
  </div>
</div>
<div id="area">

</div>
<div id="footer">
  <div id="footer-menu">
    <div class="list-col-1"></div>
  </div>
</div>

Aquí el link del código y el ejemplo funcionando https://jsfiddle.net/3dxmfejn/

Quiero eliminar ese pequeño detalle que sucede al bajar o al hacer el scroll, ese pequeño defecto que se ve como si se trancara.

Quiero lograr hacer el menú como el diseño de esta pagina este es el link http://www.global-seo.es/ si pueden observar el segundo div baja pero el efecto o la animación es muy diferente a mi diseño.

1 respuesta 1

1

si quieres conseguir el mismo efecto te aconsejaría plantearlo de otra forma, en vez de añadir 'fixed' tendrías que englobar el menu y el nav en un mismo elemento con la posición 'fixed'. Para la animación al hacer scroll modifica la propiedad top equivalente a la altura de 'nav'.

Si te fijas en el codigo de la pagina, es precisamente lo que hacen. Espero que ter haya servido :)

En cuanto al js :

    $(document).ready(function(){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 40){
         $('#menu').addClass("fixed"); // intenta evitar busquedas en el 
                                       // dom en una funcion como scroll 
    }else{
         $('#menu').removeClass("fixed");
    }
  });
});

 $(document).ready(function(){
 var menu = $('#menu');
  $(window).scroll(function(){
    if ($(this).scrollTop() > 40){
         menu.addClass("fixed"); // esto es mucho mas rapido, ya que 
                                 // tienes la referencia y no hara la 
                                 // busqueda por todo el dom cada vez que haces scroll
    }else{
         menu.removeClass("fixed");
    }
  });
});
5
  • Gracias amigo por responder, pero no entiendo a que te refieres con plantearlo diferente puede publicar el ejemplo que indicas o editar el codigo tal como me recomiendas en el siguiente enlace https://jsfiddle.net/3dxmfejn/ ante mano te agradezco.
    – Otto
    Commented el 23 jul. 2016 a las 12:30
  • jsfiddle.net/g8mnpLqn
    – costadvl
    Commented el 23 jul. 2016 a las 14:08
  • amigo el código editado no funciona debe desaparecer enseguida el primer div que contiene los datos de contactos y al subir no aparece el primer div que contiene los datos de contactos demoran un par de segundos para que aparezca no es igual no asimila al estilo de este pagina http://www.global-seo.es/ si puedes observar al momento de bajar solo el segundo div queda como el menú fijo y los datos muestran enseguida es todo lo contrario al diseño que has implementado se demora en aparecer los datos.
    – Otto
    Commented el 24 jul. 2016 a las 1:37
  • 1
    Vale lo acabo de revisar, no tuve en cuanta la asyncronia del animate. Te paso lo que si que funciona jsbin.com/ladohawime/edit?html,css,js,output
    – costadvl
    Commented el 24 jul. 2016 a las 14:30
  • perfecto amigo gracias, ahora edita la respuesta para así poder seleccionar como resuelta vale.
    – Otto
    Commented el 26 jul. 2016 a las 17:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.