Créer une div fixe lors d'un scroll

[Eddydiver]

Bonjour à tous,

Question technique dont je vais essayer d'être précis...

Je dispose d'une type contenant une zone de texte principale et à droite une sidebar.
Je souhaite que me sidebar (plus "courte" et au format 250px x 550px) soit toujours visible, même lorsque je scroll vers le bas.

J'ai donc rajouté dans ma <div> :

position : fixed;

Mais j'ai quelques problèmes :

1°/ A priori, ce code n'est pas compatible Internet Explorer. Que faut-il faire pour que cela le devienne ?
2°/ Je souhaite que ma <div> s'arrête et ne passe pas au dessous de mon footer
3°/ Lorsque je scroll vers le bas, la <div> descend dès le début du scroll alors que je souhaiterai qu'elle commence à descendre que lors
4°/ Mon thème graphique est responsive; dès lors que je passe sur un écran plus petit, la <div> en question disparait... je souhaite qu'elle reste visible mais qu'elle reste fixe.

Un grand merci !

P.S : comme vous pourrez le constater le développement n'est pas mon métier.

 

[1eB]

Ceci peut être assuré avec du jQuery, un truc dans le genre :

$(function () {
    $(window).scroll(function () {
       DivSrollMax();
    });
});

var hauteurMax = 230; //Hauteur arbitrairement choisie
function DivSrollMax() {
    if (hauteurMax < $(window).scrollTop()) {
        var top = $(window).scrollTop() - hauteurMax ;
        $("#monDivId").css("top", top + "px");
    }
    else {
        $("#monDivId").css("top", "");
    }
}

*Edit : Humm non la réponse à votre question est plutôt :

selecteurCSS {
	/* pour les navigateurs */
	position: fixed;
	top: XXXpx;
	/* pour IE < 7 */
	_position: absolute;
	top: expression(body.scrollTop + XXX + "px");
	}

avex XXX = la valeur de votre choix.

Utilisez la balise conditionnelle suivante pour ajouter cette CSS spécifique à IE < 7:

<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->

 

[Eddydiver]

Bonjour 1eB,

Merci pour votre réponse et votre réactivité.

Je ne comprend pas exactement le " *Edit : Humm non la réponse à votre question est plutôt : " : je ne tiens plus compte de ce que vous avez écrit au-dessus de ce message.

Concernant votre recommandation :

 selecteurCSS {
   /* pour les navigateurs */
   position: fixed;
   top: XXXpx;

Cela me permet effectivement d'avoir un sidebar fixe, mais ne répond pas à mon problème de scroll. Peut-être que cela n'est pas très explicite. Je vous invite à regarder ce site : *3w.evaneos.com/armenie/itineraire/7606-a-la-decouverte-de-la-terre-millenaire-randonnee-culturelle/. Je souhaite (quasiment) le même comportement au niveau de la sidebar.

Et dernier point concernant le responsive : comment désactiver ce système lorsque l'on est sur une résolution plus petite ?

Encore merci.

 

[1eB]

Bonjour,

C'est donc bien le script jQuery qui permettra d'obtenir ce résultat.
Pour désactiver le système, pareil, il faut le faire avec du javascript.