2009-10-10 4 views
25

Comment aurais-je un DIV rester en haut de la page visuellement que l'utilisateur fait défiler une page Web?Un DIV qui reste en haut pendant qu'une page Web défile

Un simple framework Javascript serait génial!

il est pour ce site web: http://BiblePro.BibleOcean.com

+5

aller avec la réponse de Kobi. Un framework javascript serait comme d'écraser un moustique avec une mitraillette. CSS est la bonne façon de faire. – Anthony

+0

J'ai vérifié votre site Web mentionné dans votre question et je l'aime vraiment, vous avez fait un excellent travail avec elle. – amaster

Répondre

9

Ici vous go: http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

Plus curieusement, j'ai la même question, mais je cherche à recréer le Apple Stor e barre latérale du panier d'achat. Cela fonctionne de la même manière, sauf qu'il échange la classe CSS de la div quand une certaine position de défilement est atteinte, de sorte qu'elle passe de l'absolu à l'état fixe. N'importe qui sait où je peux trouver ceci, j'ai cherché partout un tutoriel reproduisant l'effet.

+2

Ils utilisent CSS pour définir le chariot comme étant absolu en haut de cette colonne, et puisque la bannière sur la colonne (l'en-tête) est fixe en hauteur, ils ont javascript qui dit de rendre toute la colonne fixe si la fenêtre top est un point spécifique de la hauteur du document. Si vous lisez attentivement le code, vous remarquerez qu'ils utilisent quelque chose appelé cohérent pour le faire fonctionner. – Anthony

43

Si vous ne se soucient pas de IE6, vous pouvez utiliser position: fixed:

div { 
    top: 0; 
    position: fixed 
} 

En utilisant jQuery, voir cette question: What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?

+1

En note, 'top: 0;' définit la distance entre le haut de la fenêtre et le haut de la div à 0 (puisque px ou em n'est pas noté, le navigateur ne s'en soucie pas). C'est évident, mais bon de savoir comment ça fonctionne exactement. – Isaac

+0

@Isaac Copper - Je crois qu'une unité n'est pas nécessaire pour '0' - devrait-elle être changée, ou suis-je d'accord? – Kobi

+3

@Kobi: Il n'est pas nécessaire de spécifier des unités pour '0'. – RichieHindle

2

simple, il suffit de faire la première position Div et il fonctionnera fixe par exemple

tag div Démarrer

<div style="position: fixed;background: #336699; width: 100%;"> 

être à l'extrémité supérieure balise div

Questions connexes