Simuler position:fixe en jQuery
J'ai un en-tête qui est plus grande que la largeur de la page, de sorte que je ne peux pas utiliser position:fixed
pour le mettre en haut de la page, car j'ai absolument besoin pour être en mesure de faire défiler horizontalement. Je ne pense pas qu'il y est un CSS solution pour cela.
J'ai fait un exemple de code pour essayer de reproduire l'effet de position:fixed
, mais il y a des indésirables sauts. Mon code est le suivant :
$(window).scroll(function() {
var y = $(window).scrollTop();
$("#headertable").css('top', y+175);
});
Est-il un moyen de le rendre vraiment attaché, comme position:fixed
? (Curieusement, c'est mieux affichent maintenant dans IE que FF, car il n'a pas ce "rebond" effet)
Vous trouverez un exemple ici: http://jsbin.com/eyuya/7. Le premier tableau est avec position:fixed
, l'autre utilise mon code. C'est le saut à effet j'essaie d'éviter, si une solution existe.
Modifier:
N'ai pas encore trouvé une solution satisfaisante, je pense que je vais l'utiliser dans la fin, parce que le site est destiné à être utilisé sur IE et il ne semble pas comme une solution miracle n'existe pour joindre un div à la fenêtre d'affichage, et être capable de faire défiler horizontalement. Je commence une prime en cas de quelqu'un à rencontré ce problème et trouvé une bonne solution.
Merci pour les personnes qui ont déjà essayé de répondre à cette pas aussi simple que ça ressemble à du problème 😉
Je voudrais avoir la position:fixe, mais uniquement à la verticale, c'est-à-dire que j'ai besoin de faire défiler horizontalement qui n'est pas autorisé par position :fixe
OriginalL'auteur Michael Lumbroso | 2010-07-07
Vous devez vous connecter pour publier un commentaire.
Vous pouvez placer l'élément statique placé DIV pour obtenir des barres de défilement et d'écouter pour le défilement de la fenêtre et la position de l'en-tête fixe selon la
scrollLeft
valeur:Semble fonctionner dans IE/FF/Chrome:
http://jsbin.com/efuya3
J'avais besoin de cette solution fonctionne avec un en-tête de la largeur est de 100%, avec un min-width ensemble. Avec, comme c'est, les problèmes ne se produire lorsque la fenêtre a été actualisé au-dessus de la min-width puis réduction de la taille que l'écharpe, ce serait trop grande, provoquant un espace blanc à droite de la page lors du défilé. Pour résoudre ce problème, j'ai édité votre jsbin avec mon exemple: jsbin.com/efuya3/17 j'espère que cela aide quelqu'un d'autre qui peut tomber sur ce petit bijou. Merci !
OriginalL'auteur David Hellsing
Vous pouvez créer un mannequin visibililty:hidden élément avec la même largeur que celle de la position:élément fixe. Voici un exemple:
Eh bien, c'est bizarre, il ne semble pas faire l'affaire avec FF : voir jsbin.com/awawa3 Avez-vous une explication? Merci
il travaille sur ma fin, je suis avec FF 3.6
Le lien que j'ai fourni fonctionne sur FF 3.6 pour vous? C'est bizarre, j'ai aussi ce et si j'ai un défilement horizontal, il a le même comportement que la simple position:fixed . Dans IE7/8, c'est même pire cause, il a le même comportement que les position:absolute. Ne sais pas quel pourrait être le problème.
OriginalL'auteur jerjer
http://fixedheadertable.com/demo/multipletablesdemo.html
essayer celui-ci à la place 🙂
OriginalL'auteur Hailwood
vous pouvez créer un wrapper div, puis spécifiez une largeur sur la div
eg largeur: 150%;
ou largeur; 2000px;
en fonction de vos besoins
pourquoi avez-vous besoin pour faire défiler?
Malheureusement, il ne fonctionne pas, la définition d'une largeur d'un position:fixed élément ne permet pas de défilement horizontale, je vais essayer de faire un exemple pour montrer exactement ce que j'ai et ce qui me dérange avec ma solution. Merci pour le answser de toute façon 😉
Jetez un oeil à jsbin.com/eyuya/3 , vous voyez le problème?
j'ai peut-être tort, mais, vous voulez l'en-tête pour être fixé à la partie supérieure de la page, mais lorsque vous faites défiler vers la gauche/droite, il doit juste faire défiler de sorte que vous pouvez voir d'autres colonnes? j'ai peut-être tort, mais essayez ceci jsbin.com/eyuya/4
Merci pour votre réponse, eh bien, il semble qu'il ne fonctionne qu'avec IE, je ne sais pas pourquoi. Si il était compatible avec FF, il serait parfait.
OriginalL'auteur Hailwood