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; }
4 Réponses :
Vous voulez Position: fixe code>
. < / p>
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.
Attribut Nifty CSS:
#outer { position: fixed; }
Essayez d'utiliser la position : fixe; code> propriété. Voici un exemple de violon:
http://jsfiddle.net/austinbv/2ktfg/ P>
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?
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
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é
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 Position: fixe; Code> 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 ... p>
résinehdr () code> qui ira bien via le
tbldata code> première ligne
code> s et saisir la largeur existante et html < / li>
TblData CODE> TOP est LI>
$ prêt code>, insère une nouvelle table coque cachée qui en haut du
Tbldata Code> Li>
redizehdr () code> Pour peupler la table clonée cachée li>
tbldata code> (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 code> est, bien, fixe. li>
Tbldata code> li>
ul>
: premier code>, maintenant fixé dans les modifications que j'ai faites. Acclamations