temporary-fixed

Quelques zesplications

Un conteneur temporary-fixed-content (nom de classe au choix) dans lequel on place au moins un temporary-fixed-item (nom de classe obligatoire, à moins de modifier le plugin en conséquence).
Pour que cela ai du sens (et que cela marche), il faut évidemment que le conteneur principal ai une hauteur supérieure à celle du temporary-fixed-item !
On peut placer plusieurs temporary-fixed-item, chacun venant se fixer en haut du temporary-fixed-content à son tour.

Au chargement du plugin, temporary-fixed-content est passé en position: relative;.
Pour chaque temporary-fixed-item, on stocke dans un array fixedContentDatas :
- sa position top relative à la fenêtre du navigateur (limitTop) qui servira de référence pour déclencher sa fixation;
- sa position top initiale relative au conteneur principal (initPoy) qui servira à lui attribuer son top lorsqu'il passera en position absolute;
- la valeur contenue dans son éventuel attribut data-poy (poy) qui déterminera sa position fixée (0 si pas d'attribut data-poy, soit en haut de temporary-fixed-content). $elem.css({'position': 'relative'}); $elem.find('.temporary-fixed-item').each(function(){ var obj = {}; obj.that = $(this); obj.poy = $(this).attr('data-poy') ? $(this).attr('data-poy') + 'px' : 0; obj.limitTop = $(this).offset().top - parseInt(obj.poy, 10); obj.initPoy = $(this).offset().top - $elem.offset().top; fixedContentDatas.push(obj); });

Lorsque chaque temporary-fixed-item arrive en haut de la fenêtre (moins son data-poy moins la hauteur d'un éventuel header - id="main-header" obligatoire pour l'instant), il passe en position: fixed;, son top est fixé à zéro ou à la valeur saisie dans l'attribut data-top de temporary-fixed-content si il existe.
Lorsque le bas de temporary-fixed-content arrive au niveau du bas de temporary-fixed-item, ce dernier passe en position: absolute; avec un bottom à zéro.
Et voilà! le tour est joué.

Inclure le plugin jQuery temporary-fixed-plugin.js.
Déclarer les éléments au domready : $('.temporary-fixed-content').temporaryFixed();
Attention, on cible le parent !

Démonstration :

C'est ce long texte qui détermine la hauteur du .temporary-fixed-content')

Eu idque moderatius percipitur cum, dicta vivendo et ius. Saepe quaestio eu has, pro no omnes laboramus. Debet maiorum sea ea. Sea ex lorem molestie, elit nostrud et cum, eum ut scaevola tractatos aliquando. Mundi dolorem dignissim eos cu, sit porro nonumy cu. Duo ad quem habeo munere, sint augue no per.

Ei usu fastidii detraxit probatus, adipisci patrioque et eam. Et illud scriptorem sed. No velit audire voluptaria quo, tamquam quaeque veritus vix te. Viris euismod duo te.

Ut dico nostro intellegam eos, has at doming dicunt. Nam summo apeirian id, duo ex oblique labitur inermis. No perfecto euripidis quo. Ei est adhuc etiam, no vim elit accusam, docendi noluisse ea eos.

Has ex persius omnesque sententiae, ne regione utroque convenire quo. In tota quas convenire his. Te sea graece quodsi, vis aperiri persequeris ut. Illud verear no vel, per semper accusata ut.

Ex vim quod nonumy, aperiri principes pro ei. Te duo elaboraret deterruisset. Per quando semper laoreet ea, mei nonumy invenire et. Te ius option molestie ocurreret, id pri vocent repudiare, in graeci ornatus adolescens mei.

Per delenit feugait voluptaria ex, suas unum periculis te has. Oporteat platonem an his, qui ut vocent scripserit. Odio semper principes per ea. Amet nostrum persecuti an vel, wisi malorum fastidii eos et. Ius quidam detraxit quaestio at.

Ea sit exerci putant, his ut ubique assentior, at zril detracto nec. Quot theophrastus ad nam, viris mollis reformidans sit et. Quo viderer ceteros ne. No mea solet mollis omnium, ferri utamur adolescens te vix.

No sed invidunt eleifend, at per discere platonem deterruisset, no duo quodsi petentium. Qui minimum similique conclusionemque ad, et duo ubique putent sapientem. Per inermis principes consulatu id, altera dolorum id eos, ad quo erroribus definitionem. Et duo detracto repudiare, aperiri debitis eam cu, his at facete omittam.

Te vim dicunt inermis complectitur. Sea mucius animal impedit cu, cum ea persius splendide hendrerit. Sed ut illud solet laboramus, paulo theophrastus ei mea, sed harum recusabo dissentias at. Tantas audire interesset in vim, tale nobis eu pri. At per numquam reprimique liberavisse.

Eum integre copiosae ex, ut consetetur mediocritatem pro. Mutat deserunt et qui. Ex alterum inciderint disputationi nam, eos feugiat epicuri cu. Sit munere labore fierent ne. Reque affert ut usu, usu magna nonumy euismod no. Apeirian singulis vituperatoribus quo in.

Ei usu fastidii detraxit probatus, adipisci patrioque et eam. Et illud scriptorem sed. No velit audire voluptaria quo, tamquam quaeque veritus vix te. Viris euismod duo te.

Has ex persius omnesque sententiae, ne regione utroque convenire quo. In tota quas convenire his. Te sea graece quodsi, vis aperiri persequeris ut. Illud verear no vel, per semper accusata ut.

Clique sur l'image et bouge la souris

Ei usu fastidii detraxit probatus, adipisci patrioque et eam. Et illud scriptorem sed. No velit audire voluptaria quo, tamquam quaeque veritus vix te. Viris euismod duo te.

Has ex persius omnesque sententiae, ne regione utroque convenire quo. In tota quas convenire his. Te sea graece quodsi, vis aperiri persequeris ut. Illud verear no vel, per semper accusata ut.

- ancre 1 -
Ea sit exerci putant, his ut ubique assentior, at zril detracto nec. Quot theophrastus ad nam, viris mollis reformidans sit et. Quo viderer ceteros ne. No mea solet mollis omnium, ferri utamur adolescens te vix.

- ancre 2 -
Eu idque moderatius percipitur cum, dicta vivendo et ius. Saepe quaestio eu has, pro no omnes laboramus. Debet maiorum sea ea. Sea ex lorem molestie, elit nostrud et cum, eum ut scaevola tractatos aliquando. Mundi dolorem dignissim eos cu, sit porro nonumy cu. Duo ad quem habeo munere, sint augue no per.

Ei usu fastidii detraxit probatus, adipisci patrioque et eam. Et illud scriptorem sed. No velit audire voluptaria quo, tamquam quaeque veritus vix te. Viris euismod duo te.

Has ex persius omnesque sententiae, ne regione utroque convenire quo. In tota quas convenire his. Te sea graece quodsi, vis aperiri persequeris ut. Illud verear no vel, per semper accusata ut.

- ancre 3 -
Ea sit exerci putant, his ut ubique assentior, at zril detracto nec. Quot theophrastus ad nam, viris mollis reformidans sit et. Quo viderer ceteros ne. No mea solet mollis omnium, ferri utamur adolescens te vix.

Autre exemple

Avec une grosse image et du texte qui se superposent

Lorem ipsum dolor sit amet, id vitae putent constituto sed, vim purto suscipit ocurreret in, at qui quaerendum contentiones vituperatoribus. Vim minim percipit neglegentur ad, usu posse atqui augue no. Et nulla aperiri definiebas mea. Ad case constituam cum, errem mnesarchum interesset mei an. Ei possim antiopam explicari eam. Nonumy pertinax neglegentur pri no, ut facilis sententiae per.

C'est trop cool

Merci regaloeb

Et le truc rigolo de l'image kaléidoscopesque ?

Comment ça marche ?

Un conteneur discover-visual dans lequel on place 3 éléments : drag, discover-visual-item et discover-visual-item discover-visual-item-master transit, ces deux derniers contenant des images de même taille.

discover-visual est en position: relative; et ses enfants en absolute, drag avec le z-index le plus haut.

Lorsqu'on clique sur drag, on récupère la position de la souris par rapport à la position de discover-visual.
On applique cette valeur à la width de discover-visual-item-master et on applique largeur et hauteur initiale à l'image qu'il contient.
Et voilà! le tour est joué.

Inclure le plugin jQuery discover-visual-plugin.js et la feuille de style discover-visual.css.
Déclarer les éléments au domready : $('.discover-visual').discoverVisual();

Et la fixed-nav ?

Comment elle marche ?

Un élément fixed-nav dans lequel on place sa navigation composée de balises <a class="anchor-link">.

Lorsque la nav arrive en haut de la fenêtre, une classe fixed est ajoutée à la nav.
Lorsqu'on ne déclare pas de data-zone, la fixed-nav reste présente tout au long du scroll.
Lorsqu'on rajoute un data-zone="ID-section-avec-nav", la fixed-nav disparait lorsqu'on arrive en bas de la section dont l'ID est indiqué. Ceci permet d'avoir plusieurs fixed-nav pour plusieurs sections dans la même page.

Lorsqu'on clique sur un lien anchor-link, la page vient gentiment se placer au niveau de l'ancre, sous la fixed-nav.

Lorsqu'on scrolle sans cliquer sur un élément de nav, les boutons se highlightent (addClass="clicked") lorsque la zone correspondante arrive sous la nav. C'est le href de chaque anchor-link qui est utilisé dans le js pour relier la zone avec son lien.

Et voilà! le tour est joué.

Inclure le plugin jQuery fixed-nav-plugin.js.
Inclure la petite css fixed-nav.css.
Déclarer les éléments au domready : var fixednav = $('.fixed-nav').fixedNav({'mainHeader': 'main-header'});
Le paramètre mainHeader est l'ID du header principal, si il n'est pas déclaré, la position fixed est le haut de l'écran.

Nouveauté temporary-fixed !

data-end

L'attribut data-end permet de déterminer en pixels la durée de fixation.

Démonstration :

C'est ce long texte qui détermine la hauteur du .temporary-fixed-content')

Ei usu fastidii detraxit probatus, adipisci patrioque et eam. Et illud scriptorem sed. No velit audire voluptaria quo, tamquam quaeque veritus vix te. Viris euismod duo te.

Has ex persius omnesque sententiae, ne regione utroque convenire quo. In tota quas convenire his. Te sea graece quodsi, vis aperiri persequeris ut. Illud verear no vel, per semper accusata ut.

Ei usu fastidii detraxit probatus, adipisci patrioque et eam. Et illud scriptorem sed. No velit audire voluptaria quo, tamquam quaeque veritus vix te. Viris euismod duo te.

Has ex persius omnesque sententiae, ne regione utroque convenire quo. In tota quas convenire his. Te sea graece quodsi, vis aperiri persequeris ut. Illud verear no vel, per semper accusata ut.

data-end="600"

Nouveautés temporary-fixed !

data-next

L'attribut data-next="true" permet de déterminer que l'élément perd son fix lorsque le suivant arrive.

Des plugins jQuery, en veux-tu en voilà !

temporary-fixed

Quelques zesplications

Démonstration :

Autre exemple

Avec une grosse image et du texte qui se superposent

C'est trop cool

Merci regaloeb

Et le truc rigolo de l'image kaléidoscopesque ?

Comment ça marche ?

Et la fixed-nav ?

Comment elle marche ?

Nouveauté temporary-fixed !

data-end

Démonstration :

Nouveautés temporary-fixed !

data-next