Gestion du positionnement en Javascript
Jacob
-
Quo -
Quo -
Bonjour !
J'suis sur un projet de site web et se pose un probleme : je souhaite positionner mon menu (type side bar) de manière fixe, quelque soit le defillement de la page. J'ai beau faire des modifications du CSS je n'arrive pas au résultat souhaité. J'ai essayé :
Je suis partis d'un template, incluant un certain nombre de script .js. Je n'y connais pas grand chose en Javascript, et je me demandais s'il existait des moyens de géré le positionnement en Javascript. Si oui, les quels ? Prennent-ils l'ascendant sur le CSS ?
Bien coridalement,
Roger
J'suis sur un projet de site web et se pose un probleme : je souhaite positionner mon menu (type side bar) de manière fixe, quelque soit le defillement de la page. J'ai beau faire des modifications du CSS je n'arrive pas au résultat souhaité. J'ai essayé :
display : block;Le menu défile toujours...
position: absolute; (et fixed)
Je suis partis d'un template, incluant un certain nombre de script .js. Je n'y connais pas grand chose en Javascript, et je me demandais s'il existait des moyens de géré le positionnement en Javascript. Si oui, les quels ? Prennent-ils l'ascendant sur le CSS ?
Bien coridalement,
Roger
3 réponses
-
Tu peux modifier le CSS avec le javascript, dans ce cas l'élément prend la dernière valeur qui lui a été fournis.
Mais si tu as correctement changé enposition:fixed;
et que ça ne marche pas alors il y a un autre script qui redéfinis la position du menu quelque part quelque part. (Absolute ne défile pas avec la page)
Dans l'ordre :
- Assure toi bien qu'aucun autre positionnement n'est définis dans un CSS
- Essaye de mettreposition:fixed !important;
Si ca marche c'est que tu as un autre position dans un fichier CSS
- Lance ta page en désactivant le javascript, si ca marche cherche et désactive le script qui réécrit le CSS du menu
- En tout dernier recourtdocument.getElementById("ID du menu").style.position="fixed"; -
-
De retour !
Bon, j'ai checké mon CSS, mise à part ce que je t'ai dit précédemment rien ne concerne le positionnement de masidebar
.
Voici le CSS de cette ditesidebar
#sidebar
{
color: #929da4;
text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
position: fixed !important;
top: 1em;
right: 1%;
border: 1px solid #000000;
padding: 1em;
width: 20%;
}
Le CSS contient également :html>body .menufixe {A noter que la class
position: fixed
}menufixe
n'est pas reprise dans le HTML, j'me demande bien c'qu'elle fout encore dans mon CSS...
Le Javascript présente quelques lignes qui retiennent mon attention :window._skel_panels_config = {Nottament la ligne
panels: {
sidePanel: {
breakpoints: 'mobile',
position: 'left',
style: 'reveal',
size: '250px',
html: '<div data-action="moveElement" data-args="sidebar"></div>'
},
sidePanelNarrower: {
breakpoints: 'narrower',
position: 'left',
style: 'reveal',
size: '300px',
html: '<div data-action="moveElement" data-args="sidebar"></div>'
}
},breakpoints: 'mobile'
Je ne l'ai pas précisé avant, mais je travail à l'aide d'un template (qui sur ce coup présente des avantages mais également des inconvénients !)
bien coridalement-
Le menu a l'air d'être généré par javascript, normal dans ce cas que ton CSS ne s'applique pas.
Essaye de changerposition: 'left',
parposition: 'fixed',
Dans le bout de code.
Sinon essaye d'intégrer le code javascript que je t'ai passé.
Si ca ne marche pas je ne pourrais t'aider sans disséquer le template (Ce que je ne ferais pas), tu peux essayer de recoder toi même un menu autrement.
-