@kevinbaubet/fixer

Documentation Fixer

Fixer permet de figer un élément en fonction du scroll.

• Compatibilité : IE11+
• Dépendance : jQuery

Initialiser Fixer

var fixer = $('#element').fixer([options]);

• @param {object} options (optionnel) Options

    var fixer = $('#element').fixer({
        onFixed: function () {
            console.log('#element is fixed!');
        }
    });
  

Options

Option	Type	Valeur par défaut	Description
container	object	undefined	Conteneur de l'élément à fixer. Si la valeur n'est pas définie, c'est le body qui sera utilisé
start	integer	undefined	Hauteur du scroll à partir duquel l'élément sera fixé à partir du conteneur. Si la valeur n'est pas définie, c'est la position haute de l'élément à fixer
end	integer	undefined	Hauteur du scroll à partir duquel l'élément ne sera plus fixé. Si la valeur n'est pas définie, c'est la hauteur du conteneur - la position haute de l'élément
offset	integer	0	Décalage des limites pour fixer
reverse	boolean	false	Inverser le fonctionnenemnt pour fixer l'élément. Si true, il faudra remonter la page pour fixer l'élément
scrollEvent	boolean	true	Activer/Désactiver l'événenement de scroll. Voir section Événements personnalisés
resizeEvent	boolean	true	Activer/Désactiver l'événenement de resize. Voir section Événements personnalisés
resizeTimeout	integer	100	Delai avant l'execution de l'événement resize, en ms
autoLoad	boolean	true	Éxecuter Fixer à l'événement load
autoDisable	boolean	true	Désactive automatiquement Fixer si l'élément à fixer est plus haut que la fenêtre du navigateur
autoUpdate	boolean	false	Requis l'option resizeEvent à true. Met à jour les positions de départ/fin de Fixer lors de l'événement resize
autoPadding	boolean	false	Permet de compenser le décalage du scroll dans le conteneur lorsque l'élément est fixé
autoWidth	boolean	false	Permet de définir automatiquement la largeur de l'élément à fixer
autoPosition	boolean	false	Permet de définir automatiquement la position gauche de l'élément à fixer
classes	object	Voir ci-dessous	Liste les options ci-dessous
prefix	string	'fixer'	Préfix de classe
container	string	'{prefix}-container'	Classe pour le conteneur de l'élement à fixer
element	string	'{prefix}-element'	Classe pour l'élement à fixer
input	string	'is-input'	Classe pour indiquer si on est en train de saisir un formulaire
fixed	string	'is-fixed'	Classe pour indiquer si l'élement est fixé
bottom	string	'is-bottom'	Classe pour indiquer si l'élement est arrivé en bas du conteneur
reset	string	'is-reset'	Classe pour indiquer si l'élement est revenu à la normale
disabled	string	'is-disabled'	Classe pour indiquer si l'élement est désactivé
afterEventsHandler	function	undefined	Callback après la déclaration des événements
onScroll	function	undefined	Callback lors du scroll
onResize	function	undefined	Callback lors du resize
onFixed	function	undefined	Callback une fois l'élément fixé
onBottom	function	undefined	Callback une fois l'élément arrivé en bas du conteneur
onReset	function	undefined	Callback une fois l'élément revenu à la normale
onDisable	function	undefined	Callback une fois l'élément désactivé
onChangeState	function	undefined	Callback à chaque changement d'état (default, fixed, bottom)

API

setContainer()

Définition du conteneur courant

• @param {object} container jQuery object

    fixer.setContainer($('#container'));
  

getContainer()

Récupération du conteneur courant

• @return {object}

setFixer()

Définition de l'élement à fixer

• @param {object} element jQuery object

    fixer.setFixer($('#element'));
  

getFixer()

Récupération l'élément à fixer

• @return {object}

setStart()

Définition de la position de départ

• @param {int} position Position

    fixer.setStart(300);
  

getStart()

Récupération de la position de départ

• @return {int}

setEnd()

Définition de la position de fin

• @param {int} position Position

• @param {boolean=true} addStart Ajouter la position de départ

    fixer.setEnd(1000);
  

getEnd()

Récupération de la position de fin

• @return {int}

setHeight()

Définition de la hauteur de l'élément fixé et du conteneur

getContainerHeight()

Récupération de la hauteur du conteneur

• @return {number}

getHeight()

Récupération de la hauteur de l'élément fixé

• @return {number}

setWidth()

Définition de la largeur de l'élément fixé

getWidth()

Récupération de la largeur de l'élément fixé

• @return {number}

setPosition()

Définition de la position de l'élément fixé

getPosition()

Récupération de la position de l'élément fixé

• @return {number}

setWindowSize()

Définition de la taille de la fenêtre navigateur

getWindowSize()

Récupération de la taille de la fenêtre navigateur

• @return {object}

setState()

Définition de l'état courant

• @param {string} state default, fixed, bottom, disabled

getState()

Récupération de l'état courant

• @return {string}

setScrollTop()

Définition de la valeur courante ou précédente du scroll

• @param {string} type current, previous
• @param {int|string} position Valeur du scroll

getScrollTop()

Récupération de la valeur courante ou précédente du scroll

• @param {string} type current, previous
• @return {int}

update()

Met à jour les positions et les valeurs automatiques

fixed()

Fixe l'élément

bottom()

Place l'élément au bas du conteneur

reset()

Remet l'élément à la normale

disable()

Désactive Fixer

destroy()

Enlève Fixer du DOM

Événements personnalisés

Il est possible de désactiver les événements de scroll et de resize pour les gérer d'une autre façon.

var fixer = $('#element').fixer({
    scrollEvent: false,
    resizeEvent: false
});

var scroller = new $.Scroller();
var deviceDetect = new $.DeviceDetect();

scroller.onScroll(function () {
    // Appel du gestionnaire de scroll de Fixer en passant en paramètre l'événement scroll
    fixer.scrollHandler.call(fixer, this);
});
deviceDetect.onResize(function () {
    // Appel du gestionnaire de resize de Fixer en passant en paramètre l'événement resize
    fixer.resizeHandler.call(fixer, this);
});