IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Attribuer un "position fixed" à une div après un certain niveau de scrolling


Sujet :

JavaScript

  1. #1
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut Attribuer un "position fixed" à une div après un certain niveau de scrolling
    Salut à tous,

    Voici mon besoin: Il se rapproche pas mal de ce qui se trouve là : http://jsfiddle.net/karalamalar/grnQA/

    Je dispose d'un div (div1) qui se trouve en position absolute (mettons : top:10px; left:100px; height:1000px; width:150px).
    Sous ce div (10px en dessous), j'ai un autre div (div2) de même dimension.
    Lorsque je vais scoller pour descendre, div1 va monter et div2 aussi.
    Lorsque div2 arrive à 10px du bord en haut, il se fige et devient fixed alors que div1 est bien monté et a disparu.

    J'espère que j'ai été assez clair.
    Un grand grand merci à qui saura m'expliquer comment faire ceci.

    A+

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Salut SpaceFrog et merci de t'être penché sur mon souci (je vois que tu es toujours présent au poste ).

    Ceci dit, ce n'est pas exactement ça. J'imagine que la solution doit vraiment être très proche de ce que tu proposes mais je ne suis vraiment pas à l'aise avec Jquery.
    En fait, dans les deux div de ton exemple, c'est celle du haut qui doit scroller et celle du bas qui doit être fixed.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    huhu ...
    comme ça alors
    http://jsfiddle.net/grnQA/715/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Voilà qui fait exactement ce que je voulais.
    Merci SpaceFrog.


  6. #6
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Euh .... dernière petite question sur ce point.

    Je voudrais faire en sorte que mes deux div aient une position particulière sur mon écran (left:50%; margin-left:-150px).
    J'ai essayé quelques trucs mais le comportement de mes divs est bizarre quand je scroll ...

    Merci encore

  7. #7
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Salut à tous,

    Je reviens vers mon problème car je n'y arrive vraiment pas. A vrai dire, je me demande si cela est faisable ...
    Voici où j'en suis (notamment grâce à SpaceFrog) :
    Je voudrais que mes deux div rouge (qui se trouvent à gauche) soient à droite du div bleu (20 px sur sa droite).

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE html>
    <html>
    <head>
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>  
      <style type='text/css'>
        #main {position:absolute; top:30px; height: 2000px; left:50%; width:300px; margin-left:-150px; border:1px solid #00f}
    	#getScrolled {color: #c00; font: bold 15px arial;  border: 1px solid #c00; width: 200px; height:200px; top:10px; }		
    	#getFixed { color: #c00; font: bold 15px arial;  border: 1px solid #c00; width: 200px; height:200px; margin-top:30px; }
      </style>
      <script type='text/javascript'>//<![CDATA[ 
    	$(window).load(function(){
    	function fixDiv() {
    	  var $cache = $('#getFixed'); 
    	  if ($(window).scrollTop() > 200) 
    		$cache.css({'position': 'fixed', 'top': '10px'}); 
    	  else
    		$cache.css({'position': 'relative', 'top': 'auto'});
    	}
    	$(window).scroll(fixDiv);
    	fixDiv();
    	});//]]>  
      </script>
    </head>
    <body>
      <div id="main">&nbsp;</div>
      <div id="getScrolled">This div is going to scroll</div>
      <div id="getFixed">This div is going to be fixed</div>
    </body>
    </html>
    Merci

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    tu as un simple problème de CSS, il te faut déplacer tes DIVs vers la droite et déplacer la DIV principale vers la gauche.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    #main {
        position:absolute;
        top:30px;
        height:2000px;
        left:150px;           /* MODIFICATION  par exemple */
        width:300px;
    /*    margin-left:-150px; /* SUPPRESSION */
        border:1px solid #00f
    }
    #getScrolled {
        color:#c00;
        font:bold 15px arial;
        border:1px solid #c00;
        width:200px;
        height:200px;
        top:10px;
        margin-left:50%;    /* AJOUT décalage */
    }
    #getFixed {
        color:#c00;
        font:bold 15px arial;
        border:1px solid #c00;
        width:200px;
        height:200px;
        margin-top: 30px;
        left:50%;            /*AJOUT décalage */
    }

  9. #9
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Merci bien NoSmoking. Cela répond bien à mon besoin.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Position fixe pour les div
    Par shinobi93 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 16/11/2011, 16h48
  2. Comment faire un position:relative sur une div précise de la page ?
    Par Alexandrebox dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 31/07/2009, 23h33
  3. position fixe d'un div
    Par Sniper37 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/04/2008, 09h43
  4. [POO] récupérer la position X d'une div 'menu'
    Par goueg dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 13/07/2007, 11h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo