incapable d'obtenir le défilement lorsque la position:fixe — éléments disparaît forme de l'écran

Barre du haut (fixe) - Comme on le voit sur twitter et facebook,essayé d'imiter le même sur un projet web que je suis en train de travailler sur -- peu importe combien j'essaie,le contenu disparaît au-delà de défilement.Essayé ce tutoriel http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

mais le contenu qui chevauche lorsque la résolution est modifié ou lorsque le zoom.Ne veux pas que, comme nous le voyons sur twitter/FB - voulez-vous le faites défiler jusqu'à venir sur le zoom (ou des résolutions inférieures)

Affluent autour de cette question depuis 2 jours sans résultat positif.

Voici le code de test que j'ai édité à partir du tutoriel --

        <html>
<style type="text/css">
#footpanel {
position: fixed;
top: 0; left: 0;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-top: none;
width: 100%;
height: 25px;
}
#footpanel ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-bottom: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
}
#footpanel ul li{
padding: 0; margin: 0;
float: left;
position: relative;
}
#footpanel ul li a{
padding: 5px;
float: left;
height: 16px; width: 36px;
text-decoration: none;
color: black;
position: relative;
}
#footpanel a.home{
width: 50px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.chat{
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel { float: right; }  /*--Right align the chat and alert panels--*/
</style>
<div id="footpanel">
<ul id="mainpanel">
<li><a href="#" class="home">A </a></li>
<li><a href="#" class="profile">B </a></li>
<li><a href="#" class="editprofile">C </a></li>
<li><a href="#" class="contacts">D </a></li>
<li><a href="#" class="messages">E </a></li>
<li><a href="#" class="playlist">P </a></li>
<li><a href="#" class="videos">V </a></li>
<li id="alertpanel"><a href="#" class="alerts">S</a></li>
<li id="chatpanel"><a href="#" class="chat">F (<strong>18</strong>)</a></li>
</ul>
</div>
</html>

Ce qui se passe -- sur le zoom(ou basse résolution) le contenu de la footpanel est en train de sortir (je ne peux empêcher cette avec overflow:hidden , mais ce n'est pas ce que je veux) du conteneur(footpanel)

Ce que je veux faire -- comme twitter/FB,je veux un rouleau à venir et de la footpanel pour sauver sa mise en page et de ne pas tomber hors de la place.

S'il vous plaît aider
--CSS débutant

  • si j'ajoute un min-width(dire,min-width:1000px) sur la footpanel contenir les éléments en fonction de sa largeur -- sur zoom,le contenu va sortir de l'écran sans défilement
InformationsquelleAutor Vivek Chandra | 2011-11-06
  1. 3

    Je ne peux pas penser à une façon de le faire dans le plus pur CSS et Twitter semble utiliser Javascript pour arriver à cet effet.

    Tout d'abord, définissez la même min-width sur #footpanel et la body. Vous pouvez également définir les hauteurs de vos différents éléments de auto ou em équivalents de sorte qu'ils redimensionner bien sur zoomer et de texte redimensionner.

    Puis mettre ce Javascript sur votre page:

    <script type="text/javascript">
function hscrollbar() {
/* First, we need the horizontal scroll position of the viewer's display,
but there are different ways to call it in JS depending on browser.
I'm using the if/else shorthand notation to detect if a call is legit: 
somevar = (statement) ? statement_true_value : statement_false_value */
var left = 
/* window.pageXOffset should work for most recent browsers: */
window.pageXOffset ? window.pageXOffset : 
/* If it DOESN'T, let's try this: */
document.documentElement.scrollLeft ? document.documentElement.scrollLeft : 
/* And if THAT didn't work: */
document.body.scrollLeft;
/* Now that we have the horizontal scroll position, set #footpanel's left 
position to NEGATIVE the value, so it APPEARS to follow the scroll: */
document.getElementById('footpanel').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>

    Supprimer tous les commentaires en gris pour unbloat le code!

    • où étiez-vous depuis 3 jours..!!!.. Qui a fait le tour!!.. toujours à essayer de décoder le script.. soit les moyens,un épargnant de vie!!.. un million de mercis!!..
    • Vous êtes les bienvenus! Je vais ajouter une répartition du script pour vous.
    • Cant vous remercier assez!!.. compris la tête aux pieds..!!.. 🙂
    • est-il un meilleur moyen d'atteindre cet ?.. coz,lorsque sur zoom-en essayant de déplacer le contenu -- il y a un petit peu de retard à partir de quand j'ai faites défiler jusqu'à quand le javascript déplace le contenu -- pas élégant 4 les yeux.. a été la vérification de gmail(Quelques articles dans le new Look sont fixes) et il ne marche pas y arriver.. me demandais juste..
    • Vivek, je crains que je ne sais pas ce que tu veux dire. J'ai essayé le script de défilement lorsque vous utilisez le zoom Chrome 15 et Firefox 8 et je ne vois pas de retard. Si il y a trop de contenu sur la page, le navigateur peut être un peu lent pour le rendu de l'effet. Cela peut être fait pour regarder mieux avec une animation.
    InformationsquelleAutor Lucy Lou
  2. 1

    Juste au cas où quelqu'un est tombé sur cette réponse (comme moi) et ne pas le trouver @LucyLou la réponse de travail (avec tout le respect), je l'ai eu à travailler à partir de @Vimal la réponse de sur une autre question:

    N'avez pas besoin de le min-width et de mettre ce code Javascript à la place:

    $(window).scroll(function(){
$('#footpanel').css('left',-$(window).scrollLeft());
});
    InformationsquelleAutor deathlock