Position Simulation: fixe dans jQuery

StackOverflow https://stackoverflow.com/questions/3192848

  •  02-10-2019
  •  | 
  •  

Question

J'ai un en-tête est plus grande que la largeur de la page afin que je ne peux pas utiliser position:fixed pour le mettre au-dessus de la page, parce que je absolument besoin de pouvoir faire défiler horizontalement. Je ne pense pas qu'il y ait une solution CSS pour cela.

J'ai fait un exemple de code pour tenter de reproduire l'effet de position:fixed, mais il y a des sauts indésirables. Mon code est le suivant: 

$(window).scroll(function() {
            var y = $(window).scrollTop();
            $("#headertable").css('top', y+175);
});

Y at-il un moyen de le rendre vraiment attaché, comme position:fixed? (Curieusement, il est mieux affiché en ce moment dans IE que dans FF, parce qu'il n'a pas cet effet « saut »)

S'il vous plaît trouver un exemple: http://jsbin.com/eyuya/7 . La première table est avec position:fixed, l'autre utilise mon code. Tel est l'effet de saut J'essaie d'éviter s'il y a une solution.

Modifier :

toujours pas trouvé une solution satisfaisante, je pense que je vais utiliser à la fin, parce que le site est destiné à être utilisé sur IE et il ne semble pas comme une solution miracle existe pour attacher un div à la fenêtre , et être en mesure de faire défiler horizontalement. Je commence une prime en cas de quelqu'un tombé sur ce problème avant et trouver une bonne solution.

Merci pour les personnes qui ont déjà essayé de répondre à cette pas aussi simple car il semble problème;)

Était-ce utile?

La solution

Vous pouvez envelopper l'élément avec un statique positionné DIV pour obtenir des barres de défilement, puis écouter le défilement de la fenêtre et la position fixe l'en-tête en fonction de la valeur scrollLeft: 

var elem = $('#headertable');
var win  = $(window);
var wrap = $('<div>').css({
    width: elem.width(),
    height: elem.height()
});
elem.wrap(wrap);
win.scroll(function() {
    elem.css('left', win.scrollLeft()*-1);
});

Semble fonctionner dans IE / FF / Chrome:

http://jsbin.com/efuya3

Autres conseils

Vous pouvez créer une visibilité factice: élément caché avec la même largeur que celle de la position: élément fixe. Voici un exemple: 

<html>
<head>
  <script src="http://www.google.com/jsapi"></script>
  <script>
    google.load("jquery", "1.4.2");
    google.setOnLoadCallback(function() {
      $(document).ready(function(){
        var dummy = $('<div>dummy</div>').width( $('#header').width() + 'px').css('visibility','hidden');
        $('body').append(dummy);
      });
    });
    </script>
</head>
<body>
<div id="header" style="width:2000px;background:red;position:fixed;top:0;height:20px;">
    This is aheder with fixed position
</div>

<div style="height:1200px;background:green;">

</div>
</body>
</html>

vous pouvez créer un div wrapper puis spécifiez une largeur sur la div

ex largeur: 150%; ou la largeur; 2000px;

en fonction de vos besoins

Pourquoi avez-vous besoin pour défiler?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top