CSS o barra laterale fissa JQuery nel layout del sito Web

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

  •  19-09-2019
  •  | 
  •  

Domanda

Il mio sito web è configurato con la struttura dei contenuti come questa

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

Sto cercando di far sì che il mio sito web si comporta in cui la barra laterale rimane nella stessa identica posizione rispetto a dove sarebbe nel mio layout statico. Che è a destra della colonna del contenuto, che è sotto la divisione dell'intestazione e sopra il piè di pagina e che se riducono la finestra orizzontale che non si muove sopra la colonna del contenuto.

Ho provato la posizione fissa CSS di Google generica ecc. E non sono stato in grado di trovare nulla che stesse davvero lavorando con me, quindi mi ha portato a chiedere qui. Sto cercando come gestirlo con CSS o JavaScript, se va sul percorso JavaScript preferirei di più jQuery come base.

Modificare Non ho bisogno di supportare i browser Archiac ma, non mi interessa se funziona completamente in IE6 fintanto che non rovinano la mia pagina e si degrada in modo accettabile (come se non si sieda dalla parte sbagliata della pagina o In cima alla mia intestazione o al mio contenuto)

È stato utile?

Soluzione

Alla fine sono andato con una soluzione JavaScript da cui ho iniziato prima di venire e pubblicare qui era

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').css('top', $(this).scrollTop() + "px");
    });
</script>

Il che ha funzionato e ha prodotto il risultato che volevo, tuttavia era molto carente nell'effetto che ha raggiunto perché era molto a scatti e spiacevole da guardare.

Oggi ho fatto un po 'più di googling e mi sono imbattuto in questo post: Casella di messaggi galleggianti in alto usando jQuery. Che mi porta qui

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" }, 
            { queue: false, duration: 500, easing: 'easeInOutSine' });
    });
</script>

Che produce un bel effetto scorrevole pulito della mia barra laterale, il facilità di allentamento è ciò che lo aiuta davvero a sentirsi lucido.

Altri suggerimenti

Prova a far scorrere i tuoi contenuti con il contenuto invece di espandere l'altezza saggia e causare le barre di scorrimento per l'intera pagina. In questo modo il tuo layout rimarrà lo stesso, non importa quanto sia grande il contenuto e la sezione dei contenuti riceverà le barre di scorrimento

#content {
   overflow:auto;
}

Questo dovrebbe funzionare per te.

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