[résolu]Lien haut de page fixe mais qui reste au dessus du pied de pag

Bonjour

J'ai besoin de faire un lien haut de page sur mon site en bas a gauche qui doit etre fixe mais qui doit rester au dessus du pied de page.
Je n'arrive à trouver de solution pour qu'il se décale vers le haut lorsqu'on scroll la page et que le pied de page apparaisse.

Merci pour votre aide.

Patbonf
Modifié par patbonf (09 Aug 2012 - 13:56)

#scrollToTop{
position:fixed;
bottom:100px; /* adapte à la taille de ton footer*/
right:0;
}

Modifié par SuperMerguez (30 Jul 2012 - 13:40)

Merci pour la reponse, mais ce que je voudrais faire c'est que le lien soit à bottom 0 lorsque le pied de page n'est pas visible et bottom 100 lorsque qu'il est visible.

Patbonf

Il faut utiliser du Javascript pour détecter la position du lien par rapport au footer.

bonjour

C'est ce que j'essaie de faire, mais j'ai encore un soucis c'est si le contenu ne rempli pas la page sur toute le hauteur, alors le footer ne ce trouve pas en bas de la page mais decalé vers le haut et donc le lien est superpose au footer.
#menu_bas est le lien haut de page
#bas_page est le footer de hauteur 100px
floatable est une class qui donne un bottom de 120px
voila le script que j'utilise:

$(document).ready(function(){
		var positionElementInPage = ($('#bas_page').offset().top)-($(window).height());
// test si #bas_page visible
        if (positionElementInPage <= -120){
           $('#menu_bas').addClass("floatable");
        }
        else
        {
		$(window).scroll(
			function() {
				if ($(window).scrollTop() >= positionElementInPage) {
					// bottom 120px
					$('#menu_bas').addClass("floatable");
				} else {
					// bottom 0px
					$('#menu_bas').removeClass("floatable");
				}
			}
		);}
        });

merci pour votre aide
Modifié par patbonf (30 Jul 2012 - 16:40)

Je me répond à moi même, je crois que j'ai trouvé une solution:
voila le script:

$(document).ready(function(){
		var positionElementInPage = ($('#bas_page').offset().top)-($(window).height());
        
        if (positionElementInPage <= -0){
           var newpos = positionElementInPage - positionElementInPage - positionElementInPage;
           //ajout de la propriété bottom avec la valeur calculé précedement
           $('#menu_bas').css("bottom",newpos);
        }
        else
        {
		$(window).scroll(
			function() {
				if ($(window).scrollTop() >= positionElementInPage) {
					// fixed
					$('#menu_bas').addClass("floatable");
				} else {
					// relative
					$('#menu_bas').removeClass("floatable");
				}
			}
		);}
        // en cas de redimensionnement de la page
        $(window).resize(function(){
        var positionElementInPage = ($('#bas_page').offset().top)-($(window).height());

        if (positionElementInPage <= 0){
           var newpos = positionElementInPage - positionElementInPage - positionElementInPage;
         //ajout de la propriété bottom avec la valeur calculé précedement
           $('#menu_bas').css("bottom",newpos);
        }
        else
        {
		}
    });

 });

Je pense que cela peut etre écrit plus proprement, si vous pouvez m'aider la dessus d'ailleur.

Merci

Mise à jour:
En fait, il y a un soucis lorsque la page contient des images car le script s'execute avant que les images soient chargées, il faut donc utiliser :
$(window).load(function()

au lieu de
$(document).ready(function()

Comme cela ça marche à tout les coups.
Modifié par patbonf (09 Aug 2012 - 13:56)