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

Version imprimable

11/02/2014, 11h05
identifiant_bidon

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+
11/02/2014, 12h29
SpaceFrog

comme ça ?
http://jsfiddle.net/grnQA/713/
11/02/2014, 14h12
identifiant_bidon

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.
11/02/2014, 15h13
SpaceFrog

huhu ...
comme ça alors
http://jsfiddle.net/grnQA/715/
:mouarf:
11/02/2014, 15h33
identifiant_bidon

Voilà qui fait exactement ce que je voulais.
Merci SpaceFrog.

:merci:
12/02/2014, 10h31
identifiant_bidon

Euh .... dernière petite question sur ce point. 8-)

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

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:

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

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:

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 */
}

17/02/2014, 14h58
identifiant_bidon

Merci bien NoSmoking. Cela répond bien à mon besoin.