Posizione simulare: fissato jQuery

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

  •  02-10-2019
  •  | 
  •  

Domanda

Ho un colpo di testa che è più grande rispetto alla larghezza della pagina in modo che non posso usare position:fixed di metterlo in cima alla pagina, perché ho assolutamente bisogno di essere in grado di scorrere orizzontalmente. Non credo che ci sia una soluzione CSS per questo.

Ho fatto un esempio di codice per cercare di riprodurre l'effetto di position:fixed, ma ci sono salti indesiderati. Il mio codice è il seguente: 

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

C'è un modo per renderlo veramente attaccato, come position:fixed? (Curiosamente, è meglio visualizzata in questo momento in IE che in FF, perché non ha questo effetto "salto")

Si prega di trovare un esempio qui: http://jsbin.com/eyuya/7 . La prima tabella è con position:fixed, l'altro usa il mio codice. Questo è l'effetto di salto che sto cercando di evitare, se c'è una soluzione.

Modifica :

Non hai ancora trovato una soluzione soddisfacente, penso che userò questo, alla fine, perché il sito è pensato per essere utilizzato su IE e non sembra come una soluzione miracolosa esiste per collegare un div al viewport , ed essere in grado di scorrere orizzontalmente. Sto iniziando una taglia in caso di qualcuno sono imbattuto in questo problema prima e ha trovato una buona soluzione.

Grazie per le persone che hanno già provato a rispondere a questo non è così semplice come sembra problema;)

È stato utile?

Soluzione

Si può avvolgere l'elemento con una statica posizionata DIV per ottenere le barre di scorrimento e poi ascoltare per la pergamena finestra e la posizione di testa fissa in base al valore 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);
});

sembra funzionare in IE / FF / Chrome:

http://jsbin.com/efuya3

Altri suggerimenti

È possibile creare una visibilità dummy: elemento nascosto con la stessa larghezza di quella del position: fixed elemento. Ecco un esempio: 

<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>

si potrebbe creare un div involucro e quindi specificare una larghezza sul div

ad esempio width: 150%; o larghezza; 2000px;

a seconda delle vostre esigenze

perché avete bisogno di scorrere?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top