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
  <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", et je voudrais qu'une partie de cette sidebar continue à descendre lorsque l'utilisateur scrolle la page
  </div>
         <div style="width: 625px;">
  // Cette zone contient le contenu principal
        </div>
  </div>

Comme précisé dans le commentaire ci-dessus, je souhaiterais qu'une partie des éléments de ma Sidebar, contenue dans la DIV qui flotte à droite, continue à descendre lorsque l'utilisateur scrolle la page.
Est-ce que jQuery peut faire ça ?

[Darkaurora]

en gros tu souhaites que ta sidebar reste a sa place lorsque tu scroll tes contenus ? Si c'est bien ce que je pense un simple fixed en css suffirait.

[tom6821]

Bonjour Darkaurora,

en fait le position:fixed me placerait le contenu à une position fixe au niveau de l'écran...
Ce que je voudrais faire c'est que lors du chargement initial de la page le contenu est placé à sa place normale, c'est-à-dire en fin de sidebar... mais qu'ensuite lorsque l'utilisateur scrolle pour lire la suite du contenu principal, le contenu défile de la même manière...

L'idée ça aurait été d'utiliser jQuery pour détecter le moment où, par exemple, le contenu apparaît entièrement à l'écran, puis de changer sa position en fixed pour qu'il reste à cet endroit de l'écran. Mais peut-être que l'idée est pourrie...
De la même manière j'ai également du contenu en pleine page qui apparaît tout en fin de page, après le contenu principal. Il faudrait à ce moment là que l'objet cesse de descendre...

EDIT : je joins un schéma pour que cela soit plus clair

[Darkaurora]

Désoler je n'arrive pas a visualiser un tel procédé, cependant et en suivant les instructions données:

Etape 1: Ta sidebar est normalement construite et placée via HTML & CSS au chargement de ta page.

Etape 2: Tu scroll, il te faudra un pivot, c'est à dire, le moment ou tu va déclencher l'action de "suivis" de ta sidebar, dans ce cas on peut très bien imaginer un event "scroll" et une condition "si j'ai dépassé le pivot faire en sorte que la sidebar suive".

Pour ma part le pivot serait évidement la hauteur qui sépare le top de ton document à la position moyenne (voir basse) dans ta page.

Etape 3: Tu modifies le css de ta sidebar pour qu'elle se positionne la ou tu le souhaite.

Etape 4: Pour ta dernière requête il te faudra un autre pivot et faire le chemin inverse.

En espérant avoir été clair

[tom6821]

Merci pour ta réponse.

Oui en effet c'est quelquechose de ce style là que j'avais en-tête.

Je vais poser la question également au forum CSS, j'ai vraiment du mal avec ces histoires de positionnement absolu ou fixe.

Merci pour ton aide en tout cas :-)