7
votes

Comment geler l'en-tête de la page

Mon modèle Web est basé sur des balises DIV. Je veux geler une partie d'en-tête (en-tête, logo, etc.), je veux dire lorsque vous faites défiler la page, l'en-tête doit être en position fixe.

#outer
{

}
/* Header */
#header
 {
height: 95px;
background-image: url();
background-repeat:no-repeat;
background-position: bottom left;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
}


0 commentaires

4 Réponses :


1
votes

Vous voulez Position: fixe . < / p>


2 commentaires

Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses uniquement uniquement peuvent devenir invalides si la page liée change.


Le texte lié est la réponse.



1
votes

Attribut Nifty CSS:

#outer {
  position: fixed;
}


0 commentaires

11
votes

Essayez d'utiliser la position : fixe; propriété. Voici un exemple de violon: http://jsfiddle.net/austinbv/2ktfg/


1 commentaires

Que se passe-t-il lorsque le contenu est plus large que l'écran et que vous faites défiler X à voir le contenu? L'en-tête se déplace-t-il avec le contenu? De plus, y a-t-il du code pour masquer l'en-tête lorsque le bas du contenu est au-dessus de l'écran?



0
votes

En-tête de congélation en haut (avec des largeurs et un alignement d'en-tête corrects)

Position: fixe; fait que l'en-tête reste immobile mais est loin de tout le comportement que j'attendais d'un en-tête - Tenez-vous en haut de l'écran lorsque les en-têtes de table réelles sont défilés hors de l'écran et conservez les largeurs et le code HTML de l'en-tête congelé synchronisée avec la table réelle. Cette solution ...

  • déclare une fonction résinehdr () qui ira bien via le tbldata première ligne s et saisir la largeur existante et html < / li>
  • Définit les variables globales pour la fenêtre et l'espace réservé pour la distance dans l'écran le TblData TOP est
  • sur $ prêt , insère une nouvelle table coque cachée qui en haut du
  • Définit l'espace réservé
  • Grabs Largeur, Marges de Tbldata
  • Appels redizehdr () Pour peupler la table clonée cachée
  • Définit un observateur pour défilement: le défilement Y montre l'en-tête cloné lorsque le haut de tbldata (table principale) passe le haut de l'écran et la masque à nouveau lorsque le bas de la table passe au-dessus du haut de la table. de l'écran; et le défilement des axes X déplace l'en-tête cloné latéralement car Position: fixe est, bien, fixe.
  • Définit un observateur lorsque la fenêtre est redimensionnée pour maintenir les largeurs de la table clonée en synchronisation avec Tbldata xxx


7 commentaires

J'aime beaucoup votre approche, Gordon ... mais le code ne fonctionne pas ...


Qu'est ce que tu obtiens? Il manque parfois la marge gauche de la table. J'ai mis à jour la version personnelle de ceci pour recouvert de frezehdr lorsque le bas de la table fait défiler le haut de la fenêtre. Aussi, j'ai ajouté des variables pour pouvoir faire plus d'une sur une page.


Appréciez la réponse ... J'aimerais vraiment utiliser ce code; Je ne trouve nulle part ailleurs. Peut-être que je ne le plate pas dans la page correctement? L'effet que je reçois est que cela ne fait que rien. Je ne suis pas si familier avec jQuery ...


Assurez-vous que JQuery est au-dessus de ce code ou $ (fenêtre) va casser. Il doit également y avoir une balise pour le $ ("corps"). Prepend () pour travailler.


Sho 'Nuf, j'ai copié / collé et comme vous signalez - je n'ai pas fonctionné: / Je suis donc jeté avec elle jusqu'à présent, cela devrait fonctionner si vous copiez / coller (notez des réserves ci-dessus). J'ai ajouté le code pour masquer la table FreezeHDR lorsque le bas de la table principale fait défiler le haut de la fenêtre et remplacé d'être déprécié: d'abord avec .First ()


@Stevegray Merci de me laisser savoir vos problèmes. J'ai posté cette solution en octobre dernier après avoir travaillé dans mon code local. Je présente des excuses que je n'ai pas fait la vérification de soi requise de la version que j'étais affichée ici après avoir supprimé tous les paramètres supplémentaires de ma version locale. Plus JQuery avait déprécié : premier , maintenant fixé dans les modifications que j'ai faites. Acclamations


Quelqu'un a essayé ce plugin JQuery? Github.com/Laertejjunior/freezeheader/find/Master J'ai téléchargé et je vais gâcher avec elle pour voir si elle traite un problème ma version manque - qu'il ne ramasse pas une marge gauche parfois