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:
    345
    J'aime reçus:
    0
    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:
    77
    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:
    345
    J'aime reçus:
    0
    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:
    77
    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
lien vers rien ou page vide à créer Rédaction web et référencement 5 Juillet 2019
Créer un nom d’utilisateur de Page Facebook @ Facebook 13 Juin 2019
Créer un nouveau compte Google ads après avoir été suspendu AdWords 27 Mars 2019
À quel moment Google décide de "créer" une position 0 ? Référencement Google 26 Mars 2019
Comment créer un sitemap pas à pas ? Débuter en référencement 12 Janvier 2019
Créer une structure en silo dans WordPress : pages ou catégories ? Référencement Google 30 Octobre 2018
Créer un site temporaire ... ? Débuter en référencement 3 Octobre 2018
créer un site qui regroupe les tableaux de bords personnalisés GA de mes sites web Google Analytics 13 Juin 2018
Google sait créer un texte inédit à partir de plusieurs textes Référencement Google 19 Mai 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice