Discussion :

[tom6821]

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 !