Créer une div fixe lors d'un scroll

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Eddydiver, 28 Mars 2013.

  1. Eddydiver
    Eddydiver WRInaute occasionnel
    Inscrit:
    12 Avril 2007
    Messages:
    346
    J'aime reçus:
    1
    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> :

    Code:
    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.
     
  2. 1eB
    1eB WRInaute discret
    Inscrit:
    26 Janvier 2012
    Messages:
    76
    J'aime reçus:
    0
    Ceci peut être assuré avec du jQuery, un truc dans le genre :

    Code:
    $(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 :

    Code:
    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:
    Code:
    <!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->
     
  3. Eddydiver
    Eddydiver WRInaute occasionnel
    Inscrit:
    12 Avril 2007
    Messages:
    346
    J'aime reçus:
    1
    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 :

    Code:
     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.
     
  4. 1eB
    1eB WRInaute discret
    Inscrit:
    26 Janvier 2012
    Messages:
    76
    J'aime reçus:
    0
    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.
     
Chargement...
Similar Threads - Créer div fixe Forum Date
Comment créer une bonne diversité au niveaux des backlinks? Netlinking, backlinks, liens et redirections 19 Novembre 2013
Créer et animer un forum Demandes d'avis et de conseils sur vos sites 21 Novembre 2021
WordPress Créer et maintenir un thème vs Site Builder avec thème tout fait Développement d'un site Web ou d'une appli mobile 29 Octobre 2021
Créer 2 landing pages ou une seule ? Débuter en référencement 8 Juin 2021
Comment créer un PBN ? Netlinking, backlinks, liens et redirections 31 Mai 2021
Creer un site ecommerce Débuter en référencement 20 Mai 2021
Créer un fichier audio pour les articles Demandes d'avis et de conseils sur vos sites 2 Mai 2021
Search Console Créer des sitemap avec les redirections 301 Netlinking, backlinks, liens et redirections 14 Avril 2021
Créer un compte google my business pour un tiers YouTube, Google Images et Google Maps 20 Février 2021
Astuce Créer et programmer une diffusion en direct sur mobile Développement d'un site Web ou d'une appli mobile 17 Novembre 2020