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

Mon site est configuré avec la structure du contenu comme celui-ciCSS ou JQuery barre latérale fixe dans la mise en page du site

<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 comporter de site Web où l'encadré reste dans exactement la même position par rapport à l'endroit où il serait être dans ma disposition statique. Que c'est à droite de la colonne Content, qu'elle se trouve en dessous de la div en-tête et au-dessus de la div de bas de page et que si elle rétrécit la fenêtre horizontalement, elle ne bouge pas au-dessus 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 fonctionnait vraiment avec moi, ce qui me conduit à demander ici. Je suis à la recherche de la façon de gérer cela avec css ou javascript, si cela va sur la route javascript, je préfère le plus JQuery comme base.

Éditer Je n'ai pas besoin de soutenir les navigateurs archiac, mais peu m'importe si cela fonctionne complètement dans ie6 tant qu'il ne gâche pas ma page et se dégrade de façon acceptable (comme s'il ne se trouvait pas sur du mauvais côté de la page ou au-dessus de mon en-tête ou contenu)

Source

2009-08-21 Chris Marisic

En fin de compte, je suis allé avec une solution javascript où j'ai commencé avec avant mon arrivée et posté ici était

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

Ce qui a fait le travail et a produit le résultat que je voulais mais il était insuffisant dans l'effet qu'elle a réalisé parce que c'était très saccadé et désagréable à regarder.

J'ai fait un peu plus de googling aujourd'hui et suis tombé sur ce post: Top Floating message box using jQuery. Ce qui me conduit à ici

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

Source

2009-08-24 13:04:55

Essayez de faire défiler votre contenu div avec le contenu au lieu d'augmenter la hauteur et de provoquer des barres de défilement pour toute la page. De cette façon, votre mise en page reste la même, peu importe la taille du contenu est, et la section de contenu auront des barres de défilement

#content { 
    overflow:auto; 
}

Cela devrait fonctionner pour toi.

Source

2009-08-21 18:05:12 Zoidberg

C'est une option que je n'ai pas envisagée, je préférerais que la barre de défilement soit au bord de la page comme d'habitude mais c'est toujours un repli possible dans le pire des cas senario –

Vous pourriez toujours jouer avec le zone de contenu un peu. Avoir un div à l'intérieur du contenu qui limite la largeur. Ensuite, faites défiler le contenu de défilement jusqu'au bord de la page, puis positionnez votre barre latérale au-dessus de la zone vide que vous avez réservée dans la zone de défilement en limitant la largeur du contenu. Ensuite, votre barre latérale peut apparaître à côté du contenu, mais sur le bon côté de la barre de défilement. – Zoidberg

Le contenu et mon site est tout une mise en page de largeur fixe en utilisant blueprint, votre idée semble très viable si personne d'autre n'offre plus rien –

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

Répondre

Questions connexes