Sticky con CSS ó jQuery – Mantener posición del contenedor al hacer scroll

Crear elementos fijos que siguen la pantalla al hacer scroll es posible con jQuery o puro CSS, a continuación veremos las dos formas de como hacer que un elemento se quede fijo (Sticky).

Con CSS

<!--HTML-->
<div id="elemento_padre">
    <div id="elemento_sticky">
        <p>Elemento fijo</p>
    </div>
</div> 
/*CSS*/
#elemento_padre{
    height: 1000px;
}
#elemento_sticky{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 150px;
} 

Con jQuery

$(document).ready(function(){
    var principal_sel = $("#contenedor_padre"); 
    var padding_xtra = 30; 
    var pos_start = $("#contenedor_padre").offset().top-padding_xtra; 
    $(window).scroll(function() { 
        var sel_top_end = $("#contenedor_tope_final").offset().top; 
        var pos_end = sel_top_end - $("#contenedor_padre.container").height() -padding_xtra; 
        var calc_top = ( $(window).scrollTop() - pos_start ); 
        var calc_bottom = ( pos_end - $(window).scrollTop()); 
        if(calc_top > 0 && calc_bottom > 0) { 
            principal_sel.css("top",calc_top+"px");
        }else if(calc_top < 0 && calc_bottom > 0){ 
            principal_sel.css("top","0px");
        }else if(calc_top < 0 && calc_bottom < 0){ 
            principal_sel.css("top",pos_end+"px");
        } 
        
    }); 
    
})