bannière fixe qui suit scrollbar

[cyndi]

Bonjour

 

Je suis novice avec JS.

J'ai trouvé ce code-ci sur internet pour fixer ma scrollbal à gauche.

http://www.bonideecadeau.be/22-cadeaux-sexy-erotique

 

Il y a 1 margin-top de 20px mais si on est sur un petit écran la bannière vient se mettre dans le footer. Pas très joli.

 

Voici le code JS

$(function () {

 

var msie6 = $.browser == 'msie' && $.browser.version < 7;

 

if (!msie6) {

var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('margin-top').replace(/auto/, 0));

$(window).scroll(function (event) {

// what the y position of the scroll is

var y = $(this).scrollTop();

 

// whether that's below the form

if (y >= top) {

// if so, ad the fixed class

$('#sidebar').addClass('fixed');

} else {

// otherwise remove it

$('#sidebar').removeClass('fixed');

}

});

}

});

 

 

ET le CSS

#sidebar.fixed{

position: fixed;

top:0;

margin-top:20px;

}

#sidebar{

z-index:5;

position:absolute;

top:1180px;

}

 

Que dois-je faire pour que l'image reste au dessus du footer donc il faudrait un margin-bottom de 300 px.

 

Je paie biensûr celui qui a la solution.

[J. Danse]

D'ailleurs - bien que ça ne répond pas à la question ! - le problème de la bannière qui vient dans le footer se produit également quand on scroll tout en bas, sur un écran moyen (de portable classique, je dirais).

[FMR]

Bonjour,

 

Votre image semble trop grande pour apparaitre entièrement sur toutes les résolutions...

A mes yeux, il n'y a que 2 solutions :

 

1°) réduire la hauteur de votre image

2°) mettre un 'top:-40px' au lieu de 'top:0' à sidebar.fixed

 

Ce qui donnera :

#sidebar.fixed {

 

bottom: 0;

margin-top: 10px;

position: fixed;

top: -40px;

}

 

J'ai mis '-40px' parce que ca correspond à ma résolution. Cependant, plus le chiffre est grand, plus le haut de l'image sera cachée. Essayez suivant vos besoins, et dites moi si cela vous convient. ;-)

 

PS : Très joli site pour une très jolie webdesigner !

[Vinum]

Bonjour,

Comme le dit FMR, il n'y a pas vraiment de solution avec le script que tu as choisis car l'image est fixe et c'est le fond qui bouge.

Donc soit l'image est trop grande soit c'est le footer qui est trop grand.

La solution est donc de réduire la taille de l'image pour qu'elle s'affiche en entier dans toutes les résolutions, mais cela risque de faire une petite image. Tu peux également réduire un peu la taille du footer.

L'autre solution est de faire en sorte que l'image passe sous le footer avec un z-index moins grand. Mais l'image sera alors tronquée.

[FMR]

Bonjour,

Perso, je préfère ma solution N°2 à votre solution 'Z-index' car, elle tronque l'image mais vers le haut de l'écran, ce qui donne un effet descendant plus 'normal' et plus esthétique, principalement parce que l'image ne passe ni au-dessus, ni en dessous du footer, elle s'arrête avant.

 

Pour la hauteur du footer, j'y avais pensé aussi mais, trop chiant. Et puis, on ne change pas son footer pour une 'simple image' dans la colonne gauche, d'après moi. Enfin, ce n'est que mon avis. ^^"