Fix

Démonstration du Plugin Fix issu du framework EMS Framework

Fixation de l'élement .sidebar dès que le bord supérieur de l'élément #content-box se trouve à 20px de la limite supérieure de l'écran. Dans le cas où la page dispose d'une marge supérieure (afin de fixer un menu horizontal comme sur cette page par exemple), cette dernière est prise en compte.

Arrêt de la fixation de l'élement .sidebar dès que son bord inférieur est aligné avec le bord inférieur de l'élément #content-box.

<div class="container">
	<div class="sidebar-wrapper">
	    <div class="sidebar">...</div>
	</div>
	<div class="content-wrapper">
	    <div id="content-box">...</div>
	    <div>...</div>
	</div>
</div>

<script>
$('window').on('load', function(){
	$('.sidebar').fix({
	    classname:  'fixed',
	    from:       '#content-box',
	    offset:     20,
	    to:         '#content-box',
	    width:      '.sidebar-wrapper'
    });
});
</script>

Actualisation de la taille et position des éléments lors du clic sur le bouton #ToggleBtn :

<script>
$('window').on('load', function(){
    $('.sidebar').fix(...);
	$('#toggleBtn').on('click', function(){
        $('#text').toggleClass('hide');
	    $('.sidebar').fix('refresh');
    });
});
</script>