Positionnement fixe d'un élément

**tom6821** · 18/02/2014, 15h15

Bonjour à tous et merci d'avance pour votre aide

Je travaille sur une page qui est structurée par des DIV, de la manière suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div style="width: 100%; background: url('/mon-background.png') repeat-y scroll right top rgba(0, 0, 0, 0); position: relative;">
  <div style="width: 275px; height: 100%; margin-left: 60px; float: right;">
  // Toute cette zone contient une "sidebar" fixe
  </div>
  <div>
  // Cette zone doit contenir une Sidebar "flottante" qui descend en même temps que l'utilisateur scrolle la page
  </div>
         <div style="width: 625px;">
  // Cette zone contient le contenu principal - il s'agit d'un article Wordpress
        </div>
  </div>
  <div style="width: 100%;">
  // Enfin cette zone comprend des formulaires de connexion et d'inscription utilisateur.
  </div>

Je souhaiterais savoir si il existe une alternative au "position: fixed" pour réaliser ma SideBar flottante. En effet le "position:fixed" présente de gros désavantages dans ma situation : la zone de référence c'est l'écran du navigateur : ainsi je souhaiterais que la Sidebar flottante soit placée lors du chargement initial de la page en-dessous des éléments de la "Sidebar" fixe (quitte à ne pas être affichée du tout si à l'écran l'utilisateur ne la voit pas encore)... En fait je cherche à rendre flottante la sidebar flottante qu'à partir du moment ou l'utilisateur a suffisamment scrollé vers le bas, et dans l'idéal que la Sidebar s'arrête de descendre lors du scroll utilisateur lorsqu'on arrive au niveau de la DIV de fin, qui prend 100% en largeur... De même le positionnement fixe (si j'ai bien compris) m'oblige à spécifier un positionnement fixe, par rapport au bord droit de l'écran, ce qui n'est pas pratique si la fenêtre n'est pas en plein écran par exemple...

Vous trouverez ci-dessous un schéma tentant d'expliquer ce que je souhaite réaliser !

Nom : problème css jquery.jpg
Affichages : 234
Taille : 19,4 Ko

Nom : problème css jquery.jpg
Affichages : 234
Taille : 19,4 Ko

**crozet.magenta** · 18/02/2014, 15h51

Bonjour",
Ce que tu peux faire c'est que au chargement tu laisse ta sidebar dans le flux de la page (position static) et ensuite tu ajoutes un évènement onscroll sur ta page. tu testes la "distance de scroll" de la page et à partir d'une certaine limite (par exemple la hauteur de la sidebar fixe) tu changes le positionnement de ta sidebar mobile et tu le mets position:fixed; top:0

**tom6821** · 19/02/2014, 10h13

Bonjour Crozet.magenta

Merci pour ta réponse.

Je vais probablement m'orienter vers une solution javascript comme tu le proposes.

Bonne journée

Invité · 19/02/2014, 12h34

Bonjour,
quelle coïncidence !

Je viens justement d'en faire un (à adapter à ton besoin, évidemment) => http://codepen.io/jreaux62/pen/bGjqA

JS :

Code javascript :

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
// ------------------------------------------------
// MENU SIDE : Fixer au scroll si hauteur < fenetre
// ------------------------------------------------
$(function(){
	var menuside	= $('#sideSousNav');
	var menusidetop = menuside.offset().top;
	var scrollHok = ($('#bodyWrap1').height() - menuside.height());
	$(window).scroll(function () { // Au scroll dans la fenetre on déclenche la fonction
		// si on a défilé de plus de la hauteur du header, du haut vers le bas
		if (menuside.height() < $(window).height() && $(this).scrollTop() > menusidetop ) { 
			menuside.addClass('sideSousNavFixTop');
			// si on atteint le bas de la div contenante, on ajuste la position
			if ($(this).scrollTop() > scrollHok ) { 
				menuside.css({ 'top':(scrollHok - $(this).scrollTop())+'px' });
			// sinon, on fixe en haut
			} else {
				menuside.css({ 'top':'0px' });
			}
		} else {
			menuside.removeClass('sideSousNavFixTop');
			menuside.width( 'auto' );
		}
	});
 
});
// ------------------------------------------------

HTML :

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
30
31
32
33
34
35
36
37
38
39
40
<!-- Scripts - jQuery : initialisation -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <header>header</header>
 
  <section id="bodyWrap1">
    <div id="colL">
      <nav id="sideSousNav">
        <ul>
          <li>menu1</li>
          <li>menu2</li>
          <li>menu3</li>
          <li>menu4</li>
          <li>menu5</li>
          <li>menu6</li>
          <li>menu7</li>
          <li>menu8</li>
          <li>menu9</li>
        </ul>
      </nav>
    </div>
    <div id="colD">
    <p>
Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.
    </p>
    <p>
Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.
    </p>
    <p>
Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspiraret, solisque scholis iussit esse contentum palatinis et protectorum cum Scutariis et Gentilibus, et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit, Gallum, quem crebro acciverat, ad Italiam properare blande hortaretur et verecunde.
    </p>
    <p>
Excogitatum est super his, ut homines quidam ignoti, vilitate ipsa parum cavendi ad colligendos rumores per Antiochiae latera cuncta destinarentur relaturi quae audirent. hi peragranter et dissimulanter honoratorum circulis adsistendo pervadendoque divites domus egentium habitu quicquid noscere poterant vel audire latenter intromissi per posticas in regiam nuntiabant, id observantes conspiratione concordi, ut fingerent quaedam et cognita duplicarent in peius, laudes vero supprimerent Caesaris, quas invitis conpluribus formido malorum inpendentium exprimebat.
    </p>
    <p>
Huic Arabia est conserta, ex alio latere Nabataeis contigua; opima varietate conmerciorum castrisque oppleta validis et castellis, quae ad repellendos gentium vicinarum excursus sollicitudo pervigil veterum per oportunos saltus erexit et cautos. haec quoque civitates habet inter oppida quaedam ingentes Bostram et Gerasam atque Philadelphiam murorum firmitate cautissimas. hanc provinciae inposito nomine rectoreque adtributo obtemperare legibus nostris Traianus conpulit imperator incolarum tumore saepe contunso cum glorioso marte Mediam urgeret et Parthos.
    </p>
    </div>
  </section>
 
<footer>footer</footer>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
* { padding:0; margin:0: }
header { clear:both; height:100px; background:#ccc; }
section { clear:both; }
#bodyWrap1 { width:100%; max-width:1000px; margin:0 auto; overflow:hidden;/*important*/ }
#colL { float:left; width:30%; }
#colD { float:right; width:70%; }
#sideSousNav ul { list-style-type:square; }
footer { clear:both; height:70px; background:#ccc; }
 
#colL { position:relative;/*important*/ }
.sideSousNavFixTop { position:fixed; top:0px; }