Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

Men煤 o banner deslizante con JavaScript y CSS

7 agosto, 2019

En esta entrada vamos a ver como desplazar un banner o un men煤 y as铆 dejarlo fijo en el area visible. De esta manera seg煤n vayas haciendo scroll vaya bajando y permanezca alineado de manera que se muestre siempre visible en tu web.

Este mismo m茅todo que utiliza CSS y JavaScript te vale para hacer menus desplazables, banner en el sidebar u otro tipo de elementos que quieras mostrar fijo en tu web.

Este tipo de efecto se ha puesto muy de moda en los 煤ltimos a帽os , por lo que lo pod茅is ver en numerosas webs.

<div id="sidebar2" class="col-xs-12 col-sm-12 col-lg-12 hidden-sm hidden-xs">
<p><img style="height: 550px;" src="/banner lateral.001.jpeg" alt="" /></p>
</div>
<script type="text/javascript">
var elementPosition = $('#sidebar2').offset();
var distance_from_top = document.body.scrollTop;
 
$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top && $(window).scrollTop()>200 ){
              $('#sidebar2').css('position','fixed').css('top','0');
        } else if (distance_from_top > 500){
              $('#sidebar2').css('position','static');
        }
        else {
            $('#sidebar2').css('position','static');
        }    
});
</script>

css fijar contenido

En el c贸digo le puedes dar la distancia a la que quieres que una vez pasada esa distancia el div o el menu o el elemento que hayas puesto se desplace y empiece a acompa帽arte por la p谩gina.

Aqu铆 tienes otra forma que en funcionamiento har铆a lo mismo:

<div id="navigation" class="col-xs-12 col-sm-12 col-lg-12 hidden-sm hidden-xs">
<p><img style="height: 550px;" src="/banner lateral.001.jpeg" alt="" /></p>
</div>
 
<script type="text/javascript">
var elementPosition = $('#navigation').offset();
 
$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('#navigation').css('position','fixed').css('top','0');
        } else {
            $('#navigation').css('position','static');
        }    
});
</script>
5/5 - (1 voto)