Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: cotin en 14 Febrero 2022, 21:45 pm



Título: menu sticky - sin plugin
Publicado por: cotin en 14 Febrero 2022, 21:45 pm
tengo un problema con la web hice el menu  stick  si funciona pero me flata una barra que esta arriba como hago y no funciona en celulares
aca esta la web - termine usando plugin  pero quiero hacerlo sin pluging   https://galatransporte.com.pe/

acá esta el código si alguien me podría decir que puedo cambiar

@media only screen and (min-width: 960px) {
header#site-header {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   width: 100%;
   z-index: 9999;
   -webkit-transition: all .5s;
   transition: all .5s;
   height: 76px;
}
.page-header {
   margin-top:76px;
}
header#site-header.sticky {
   height: 62px;
}
header#site-header.sticky #site-navigation-wrap .dropdown-menu>li>a {
   line-height: 62px;
}
.admin-bar header#site-header {
   top: 32px;
}
#site-logo #site-logo-inner {
   height:0 !important;
}
}
/**----- jquery-----**/
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $('header#site-header').addClass('sticky');
        }
        else{
            $('header#site-header').removeClass('sticky');
        }
    });
});


se lo agradeceria


Título: Re: menu sticky - sin plugin
Publicado por: [u]nsigned en 17 Febrero 2022, 05:51 am
el problema esta en que solo aplicas position:absolute cuando el ancho de la pantalla es superior a 960px, por eso se te rompe, yo pondría solo lo necesario dentro de ese media query