donjon div sur haut de la page pendant le défilement

==================donjon div sur haut de la page pendant le défilement

Nom: // zone de texte html //

âge

:// zone de texte //

// // div

// // table

==================

Assumer ce qui précède en tant que page HTML. Supposons également que la table a au moins 50 lignes de sorte que, la page entière pourrait défiler. actuellement, lorsque je fais défiler la page, la page entière (div, table) défile. Je veux que le div soit en haut de la page tout en faisant défiler comme la figure ci-dessous:

==================

// div //

...

// // row21

// // row22

...

==================

Je voudrais savoir si cela est possible du tout. J'ai essayé d'utiliser CSS pour div:

// CSS div:

position: fixed;

largeur: 100;

Mais, il affiche la position du div exactement où il était auparavant. Mais, je voudrais déplacer le div en haut de la page pendant le défilement.

Merci.

Source

2012-10-25 Ashok

'largeur: 100,' a besoin de quelques unités. – Blender

Mon mauvais! C'est, largeur: 100%; – Ashok

Ceci n'est pas possible dans le CSS seul. Comme vous le savez déjà, vous pouvez utiliser:

position: fixed

pour maintenir l'élément au même endroit par rapport à la fenêtre du navigateur, mais pour le déplacer vers le haut lorsque le contenu est défilée vous devez utiliser JavaScript.

Vous voudrez peut-être regarder this SO post pour avoir une idée de la façon d'obtenir cet effet.

Source

2012-10-25 23:17:50 kgr

Vous devez ajouter ceci au CSS.

top:100px;//adjust til the div is below the name and age section. 
    position:fixed;

Je pense que c'est ce que vous cherchez.

Source

2012-10-25 23:18:53 Rayshawn

Cela entraînerait le div à se positionner par-dessus les sections 'name' et' age' (en les couvrant) par défaut, donc pas exactement ce que OP avait en tête je pense. – kgr

J'ai déjà essayé ça. Comme le soulignait KGR, cela déplacerait la div au-dessus du nom et de l'âge. – Ashok

Vous pouvez le positionner en ajustant l'attribut top, à la hauteur du nom et div age pour le garder en dessous. – Rayshawn

Ce n'est pas trivial

Vous devez utiliser JavaScript pour copier div et faire connaître sa position fixe.
Vous devrez gérer l'événement de défilement pour masquer et afficher fixe div

J'ai une petite bibliothèque pour faire une telle chose pour les en-têtes de table, je pense que vous pouvez lire le code source ou utiliser comme-il-est pour une table

demo: http://www.agyey.com/demo/stickyhead/demo.html
code: https://bitbucket.org/anuraguniyal/stickyhead

Source

2012-10-25 23:19:09

donjon div sur haut de la page pendant le défilement

Répondre

Questions connexes