CSS ou JQuery Fixe la barre latérale dans la mise en page du site

Mon site web est le programme d'installation avec le contenu de la structure comme ceci

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

Je suis en train de faire mon site web se comportent où la barre latérale reste dans le même emplacement que celui où il serait dans ma mise en page statique. Qu'il est à la droite de la colonne de Contenu, qu'il est au-dessous de l'en-tête div et au-dessus du pied de page div et que, si elles réduisent la fenêtre horizontalement que ça ne bouge pas sur le haut de la colonne de contenu.

J'ai essayé google générique css position fixe etc et n'ont pas été en mesure de trouver quelque chose qui a vraiment travaillé avec moi à ce qui m'amène à me demander ici. Je suis à la recherche pour savoir comment gérer ce soit avec css ou de javascript, si elle passe le javascript de la route j'avais la plupart préfèrent JQuery comme une base.

Modifier je n'ai pas besoin de soutien archiac navigateurs mais, je ne m'inquiète pas si il fonctionne entièrement dans ie6, tant qu'il ne ruine pas ma page et se dégrade de façon acceptable (comme il ne s'est pas assis sur le mauvais côté de la page ou sur le dessus de ma tête ou de contenu)

OriginalL'auteur Chris Marisic | 2009-08-21

  1. 11

    À la fin, je suis allé avec une solution d'activer javascript où j'ai commencé avec avant que j'arrive et posté ici était

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

    Qui fait le travail et a produit le résultat que je voulais cependant, il a été très peu l'effet qu'elle atteint, car il était très saccadé et désagréable à regarder.

    J'ai fait un peu plus d'une recherche sur google aujourd'hui et suis tombé sur ce post: Top Flottante, boîte de message à l'aide de jQuery. Ce qui m'amènent ici

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

    Qui produit un bien propre effet de défilement de ma barre latérale, l'assouplissement, à mon avis, est vraiment ce qui l'aide à se sentir poli.

    OriginalL'auteur Chris Marisic

  2. 2

    Essayez d'avoir votre div du contenu de défilement avec le contenu, au lieu de l'expansion de la hauteur de sage et de causer des barres de défilement pour l'ensemble de la page. De cette façon, votre mise en page reste la même, peu importe comment grand le contenu, et le contenu de la section obtiendrez des barres de défilement

    #content {
   overflow:auto;
}

    Qui devrait fonctionner pour toi.

    C'est une option que je n'ai pas en compte, je préfère pour la barre de défilement pour être au bord de la page, comme d'habitude, mais il est toujours possible de secours dans le pire des cas senario
    Vous pouvez toujours jouer avec la zone de contenu un peu. Avoir une div à l'intérieur du contenu qui limite la largeur. Alors le défilement de contenu div étendent jusqu'au bord de la page, puis absolument position de votre barre latérale sur la zone vide que vous avez réservé dans la zone de défilement en limitant le contenu de la largeur. Ensuite, votre barre latérale peut apparaître à côté du contenu, mais sur le bon côté de la barre de défilement.
    Le contenu et mon site a une largeur fixe de mise en page à l'aide de plan, votre idée semble très viable que si aucune autre solution n'offre rien de plus
    Ouais, c'est assez laid... pas de doute... mais son css... généralement c'est le cas, LOL

    OriginalL'auteur Zoidberg