Question

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

Comments

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...

---

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

Answer 1

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/