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