[RESOLU] Colonnes intelligentes

Bonjour bonjour,

Eh eh, c'est idiot le temps qu'on peut passer sur un détail :
Je cherche en vain comment (c'est dur à expliquer) modifier le comportement de ma colonne #extra, en fonction de la position du scroll dans la #page.

L'idée, c'est que lorsqu'on atteint le bottom de #extra quand on scroll en bas de #page, celle-ci passe en position fixed. De cette manière, on évite l'apparition d'un "vide", sous la colonne #extra. Un peu comme la colonne Summary sur http://store.apple.com/us/configure/MB953LL/A?mco=MTM3NDc2NjA ... mais en fonction du bottom, pas du top, et en assez dynamique pour fonctionner avec des hauteur variable.

Bref, je suis pas très callé en JavaScript, mais j'ai pondu ça :

var ratio = $("#extra").height()-$("#page").height();
$("#page").scroll( function() {
    if($("#page").scrollTop()>ratio){
        $("#extra").css({"position":"fixed","bottom":"0"});
    }else{
        $("#extra").css({"position":"relative","bottom":""});
    }
} );

J'utilise JQuery, et ma div #page est fixe. J'éspère que mes indications sont claires.

... est-ce que quelqu'un aurait la sympathie de me filer un coup de main là-dessus, please ?

Des bisous.
Modifié par WebMaestro (04 Mar 2010 - 15:14)

Ah! Ca y est, j'ai touvé un exemple de ce que je cherche à obtenir : http://www.eram.fr/chaussure-homme-chaussures-detente-ville ... peut-être que cela vous parlera plus.

Je ne demande pas forcément un code prépondu, mais si quelqu'un avait une piste, ou saurait me dire ce qui bloque dans mon script de non-initié... ce serait cool.

Des bisous.

Salut,

Et il se passe quoi exactement avec ton script ? Enfin, je veux dire : qu'est-ce qui fonctionne/ne fonctionne pas ?

Sinon t'as pas une démo en ligne, au moins pour voir la compo et comprendre ce que tu souhaites réellement faire ?

Salut ZeB_panam,
Je suis incapable de te dire ce qui fonctionne ou non, spécifiquement, dans mon script. Mais je peux t'affirmer que ça ne fonctionne pas.
Si tu vas sur http://www.webmaestro.fr, tu aura un aperçu de mes deux colonnes. L'idée, ce serait que le vide (blanc) sous la colonne #extra (sous le bouton twitter) n'apparaisse jamais...
Je ne sais pas trop comment être plus explicite... oh, et c'est la première fois que j'essaie de pondre du JavaScrript par moi-même, sans tuto ni rien. Donc il se peut aussi que mon problème soit du à un oubli ou une étourderie bête comme chou.

var ratio = $("#extra").height()-$("#page").height(); // Là, je calcule la différence de hauteur entre mes deux colonnes
$("#page").scroll( function() {  
    if($("#page").scrollTop()>ratio){ // Si l'utilisateur a scrollé plus que la différence de taille (c'est à dire à partir du moment où un vide est censé s'afficher sous la colonne #extra)
        $("#extra").css({"position":"fixed","bottom":"0"}); // Alors je fixe ma colonne #extra en bas de page
    }else{
        $("#extra").css({"position":"relative","bottom":""});  // Sinon, je "libère" la colonne extra
    } 
} );

Merci pour votre attention !

Bonjour !

Me revoilà, avec cette fois ci un script qui fonctionne ! Eh eh ! Seulement voilà, j'ai beau prendre beaucoup de plaisir avec jQuery, je n'en suis qu'à mes balbutiements.

Pour résumer l'idée, ce script permet de déplacer la plus petite des deux colonnes, lorsque l'on descend en bas de page, pour empêcher l'affichage du "vide" sous celle-ci.

Je voulais donc tout d'abord partager mon code, mais aussi et surtout savoir comment l'optimiser :

    var hauteurEntete = $('article').offset().top;
    
    $(window).scroll(function(){

        // début des variables que j'aimerai définir hors de la fonction,
        // mais après chargement complet de la page
        if ($('article').outerHeight() >= $('aside').outerHeight()){
            var grandeColonne = $('article');
            var petiteColonne = $('aside');
        }
        else {
            var grandeColonne = $('aside');
            var petiteColonne = $('article');
        }
        if (petiteColonne.outerHeight() > $(window).height()){
            var scrollMin = petiteColonne.outerHeight() - $(window).height() + hauteurEntete;
            var scrollMax = grandeColonne.outerHeight() - $(window).height() + hauteurEntete;
        }
        else {
            var scrollMin = hauteurEntete;
            var scrollMax = grandeColonne.outerHeight() - petiteColonne.outerHeight() + hauteurEntete;
        }
        // fin des variables que j'aimerai définir hors de la fonction,
        // mais après chargement complet de la page

        if ($(window).scrollTop() > scrollMin){
            if ($(window).scrollTop() < scrollMax){
                petiteColonne.animate({'top' [decu]$(window).scrollTop() - scrollMin)},100);
            }
            else {
                petiteColonne.css({'top' [decu]grandeColonne.outerHeight() - petiteColonne.outerHeight())});
            }
        }
        else {
            petiteColonne.css({'top':0});
        }
    });

Dans cet exemple les deux colonnes concernées correspondent simplement à mes balises HTML5 uniques "article" et "aside".

Le problème principale, c'est que si je sors la définition des variables de la fonction scroll(), la hauteur des colonnes calculée avant la fin du chargement complet de la page ne correspond pas forcément à la hauteur après chargement.

J'ai essayé plusieurs choses avec $(document).ready(), mais sans succès. Il s'agit certainement d'une subtilité que je n'ai pas encore bien assimilé avec l'utilisation des fonctions... Une idée ?
Modifié par WebMaestro (26 Sep 2010 - 14:37)

C'est bon. Ca fonctionne plutôt bien. Évidemment, c'est à adapter selon votre DOM : le mien ne comporte qu'une seule balise <article>, et une seule balise <aside>.

Des bisous.

var grandeColonne = null,
petiteColonne = null,
scrollMin = null,
scrollMax = null,
petitOffset = null,
grandOffset = null,
articleOffset = $('article').offset().top,
asideOffset = null;

$(window).scroll(function(){
	// le menu flotte potentiellement au dessus du <aside>
	asideOffset = ($('#entete').outerHeight() + $('#menu').outerHeight());
	if (($('article').outerHeight() + articleOffset) >= ($('aside').outerHeight() + asideOffset)){
		grandeColonne = $('article');
		petiteColonne = $('aside');
		grandOffset = articleOffset;
		petitOffset = asideOffset;
	}
	else {
		grandeColonne = $('aside');
		petiteColonne = $('article');
		grandOffset = asideOffset;
		petitOffset = articleOffset;
	}
	if (petiteColonne.outerHeight() > $(window).height()){
		scrollMin = petiteColonne.outerHeight() - $(window).height() + petitOffset;
		scrollMax = grandeColonne.outerHeight() + grandOffset - $(window).height();
	}
	else {
		scrollMin = petitOffset;
		scrollMax = grandeColonne.outerHeight() - petiteColonne.outerHeight() + grandOffset;
	}
	if ($(window).scrollTop() > scrollMin){
		if ($(window).scrollTop() < scrollMax){
			petiteColonne.animate({'top' [decu]$(window).scrollTop() - scrollMin)},50);
		}
		else {
			petiteColonne.css({'top' [decu]grandeColonne.outerHeight() - petiteColonne.outerHeight() + grandOffset - petitOffset)});
		}
	}
	else {
		petiteColonne.css({'top':0});
	}
});

Modifié par WebMaestro (26 Sep 2010 - 14:36)