CSS oder JQuery Fest Sidebar in Website-Layout

Meine Website ist Setup mit der Content-Struktur wie dieseCSS oder JQuery Fest Sidebar in Website-Layout

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

Ich versuche, meine Website verhalten zu machen, wo Sidebar in der exakt gleichen Stelle relativ bleibt, wo würde es in meinem statischen Layout sein. Es ist rechts von der Spalte Inhalt, dass es unter dem Header div und über dem Fußzeilen-div ist und wenn es das Fenster horizontal verkleinert, dass es sich nicht über der Inhaltsspalte verschiebt.

Ich habe Google Generic Css feste Position usw. versucht und nicht in der Lage gewesen, etwas zu finden, das wirklich mit mir arbeitete, so dass mich führt, hier zu fragen. Ich suche, wie man mit css oder javascript, wenn es die Javascript-Route geht, die ich JQuery am liebsten als Basis behandeln würde.

Bearbeiten Ich brauche keine archiac Browser zu unterstützen, aber es ist mir egal, ob es vollständig in ie6 funktioniert, solange es meine Seite nicht ruiniert und annehmbar abbaut (wie es nicht darauf sitzt) die falsche Seite der Seite oder oben auf meiner Kopfzeile oder Inhalt)

Quelle

2009-08-21 Chris Marisic

Am Ende habe ich mit einem Javascript-Lösung ging, wo ich mit begann, bevor ich gekommen bin und hier gepostet war

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

Welche Arbeit tat und produzierte das Ergebnis, das ich jedoch wollte es sehr in der Wirkung fehlt es erreicht weil es sehr ruckelnd und unangenehm war zu beobachten.

Ich habe heute noch mehr gegoogelt und stieß auf diesen Beitrag: Top Floating message box using jQuery. Was mich führen

hier, die eine schöne saubere Scrollen Wirkung meiner Sidebar erzeugt, ist die Lockerung meiner Meinung nach, was es wirklich poliert fühlen hilft.

Quelle

2009-08-24 13:04:55

Versuchen Sie, Ihren Inhalt div mit dem Inhalt blättern, anstatt Höhe zu erweitern und Bildlaufleisten für die ganze Seite zu verursachen. Auf diese Weise Ihr Layout gleich, egal bleiben, wie groß der Anteil ist, und der Inhalt Abschnitt Scrollbalken

#content { 
    overflow:auto; 
}

erhalten, sollte für ya arbeiten.

Quelle

2009-08-21 18:05:12 Zoidberg

Das ist eine Option, die ich nicht in Betracht gezogen habe, würde ich bevorzugen, für die Bildlaufleiste am Rand der Seite wie normal zu sein, aber dies ist immer eine mögliche Fallback im schlimmsten Fall senario –

Sie könnten immer mit dem herumspielen Inhaltsbereich ein bisschen. Ein div innerhalb des Inhalts, der die Breite einschränkt. Lassen Sie dann den Scroll-Inhalt div bis zum Rand der Seite gehen, positionieren Sie dann Ihre Seitenleiste absolut über den leeren Bereich, den Sie im Scroll-Feld reserviert haben, indem Sie die Inhaltsbreite einschränken. Dann kann Ihre Seitenleiste neben dem Inhalt erscheinen, aber auf der richtigen Seite der Bildlaufleiste. – Zoidberg

Der Inhalt und meine Website sind alle eine feste Breite Layout mit Blueprint, klingt Ihre Idee sehr brauchbar, wenn niemand sonst mehr bietet –

CSS oder JQuery Fest Sidebar in Website-Layout

Antwort

Verwandte Themen