entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Buenas tardes, estoy haciendo un menú que quiero que se muestre y se mantenga en fixed cuando el usuario pase por el menú de mi sitio bajando para ver las noticias. le puse este estilo css a mi menu de fixed que es distinto a mi menú de secciones.

#navbarfix{
        position: fixed;
        width: 100%;
        height: 52px;
        background: @fondo_label_seccion;
        color: white;
        top: 0px;
        z-index: 9999;
        img{
            height: 40px;
            width: 35px;
            padding-top: 5px; 
            padding-left: 5px;
        }

    }

y quiero que se mantenga en el superior como un menú de celular ya que es para las media query de 0 a 320px saludos atentamente
Dairon

0voto

Leonardo-Tadei comentado

Y cuál es el problema Dairón?

Si escribís un media query para 320px que tenga un estilo CSS fijo para el menú, se activará solo al verlo en una patalla de 320 o menos.

Si estás usando bootstrap, bastaría que agregues al media query que el menú es navbar-fixed...

0voto

dairon comentado

Maestro Leonardo yo no estoy utilizando Bootstrap yo uso css con less desde cero y quiero que cuando el usuario valla bajando al quedarle el menú de mi sitio chocando con el top = 0 entonces este div de mi menú de secciones se haga display = none, y el div de id #navbarfix que estará en none se ponga en block y entonces cuando el usuario suba de nuevo al pasar por el mismo lugar haga el inverso.
Saludos Dairon

1 Respuesta

2votos

white Puntos75880

Hola @dairon, me parece que usas jQuery, de ser así intenta de esta forma:

$(window).on('scroll', function()
{
    var section = null,
        winScrollTop = $(window).scrollTop();

    $('.section').each(function(){
        var offset = $(this).offset();

        if(winScrollTop >= offset.top && (offset.top + $(this).height()) > winScrollTop)
        {
            section = $(this);
            return false;
        }
    });

    $('#navbarfix').css('position', section ? 'fixed' : 'static');
});

demo:

https://jsfiddle.net/9a38Lnsk/embedded/result/
http://jsfiddle.net/9a38Lnsk/

1voto

dairon comentado

Gracias white, le hice unos cambios para que estuviera visible y se sujetara cuando el scroll pasara por ahí y me quedó bien. aquí pongo los cambios que hice:

//NavBarFixed 320
$(window).on('scroll', function(){
  var section = null,
    winScrollTop = $(window).scrollTop();

  $('#encabezado-pagina').each(function(){
    var offset = $(this).offset();

    if(winScrollTop >= offset.top && (offset.top + $(this).height()) > winScrollTop)
        {
      section = $(this);
      return false;
    }
  });

  $('#navbarfix').css('position', section ? 'static' : 'fixed');
  if (section) {
      $("#navbarfix").removeClass("fijar");                  
    }else{  
      $("#navbarfix").addClass("fijar");
  };  
});
CSS:
.fijar{
        top: 0px;
        z-index: 9999;      
    }

les quité el top y el z-index a navbar para ponerselo cuando se fije y quitarcelo cuando se haga estático.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta