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:
    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:
    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:
    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 un ecommerce pour un client avec Wix ou Prestashop ? e-commerce 7 Novembre 2019
Quel type de logiciel utiliser pour créer un site web simple et performant ? Demandes d'avis et de conseils sur vos sites 14 Octobre 2019
Créer une redirection 301 URL Rewriting et .htaccess 5 Septembre 2019
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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice