Comment réparer un menu bloc ou en ligne

Как зафиксировать блок или меню на сайте

Comment rendre le site un menu fixe ou une unité flottante.

Il existe de nombreuses solutions. Oui, et vous pouvez écrire si juge de JavaScript et jQuery.

Correction du menu principal sur le site

Peut-être la solution la plus élégante et simple à jQuery. par exemple le code:

 $ (Function () {$ (fenêtre) .scroll (function () {top var = $ (document) .scrollTop (); if (top <100) $ ( «flottant».) Css ({top: '0. ', la position: «relative»}); d'autre $ ( «flottant».) css ({top :.' 10px ', la position:' fixe '});});}); 

Ce code doit être inséré dans un js-fichier séparé ou directement dans le balisage, encadré dans un <script> code de la balise </ script>.

Examinons ce qui est ici. Donc, la fonction $ (fenêtre) .scroll (function () {}); surveille la fenêtre de défilement. La variable est définie en haut tiret haut de défilement $ (document) .scrollTop ();. Ensuite, vérifiez si le haut est inférieure à 100 pixels, l'élément avec la classe attribuée .floating styles CSS: le positionnement relatif et top marge - 0 pixels. Lorsque vous faites défiler la valeur supérieure est supérieure ou égale à 100 pixels, l'élément affecté .floating styles: position fixe et la marge supérieure - 10 pixels.

Maintenant, lorsque vous faites défiler les pages du menu sera toujours sur le dessus.

Menu fixe dans WordPress barre latérale

Il est un plugin intéressant pour WordPress codeflavors-menu flottant . Il peut être installé directement à partir du panneau d'administration WordPress. fiche pratique. Il fonctionne avec menu standard du site. Il dispose de plusieurs options. Autant il est facile à utiliser. Le développeur du site ont la documentation pour ce plugin.

Si vous voulez faire un menu flottant dans WordPress, alors ne hésitez pas à utiliser ce plugin.

Correction bloc / menu dans la barre latérale sur le site jQuery

Si vous voulez faire non seulement le menu flottant, mais aussi pour bloquer tout contenu fixe, alors pour que vous aurez besoin de modifier légèrement le code ci-dessus.

  $ (Document) .ready (function () {
  var br = $ .browser;
  $ (Fenêtre) .scroll (function () {
  top var = $ (document) .scrollTop ();
  if (top <61) {
  $ ( "# Sidebar") css ({top: '0', la position: «relative», marginLeft: '25px'}) ;.
  } Else if ((! Br.msie) || ((br.msie) && (br.version> 7))) {
  $ ( "# Sidebar") css ({top: '22px', la position: «fixe», marginLeft: '535px'}) ;.
  } Else if ((br.msie) && (br.version <= 7)) {
  $ ( "# Sidebar") css ({top: '22px', la position: «fixe», marginLeft: '25px'}) ;.
  }
  });
 });

Ce code est exactement le même, mais le style de la marge gauche ajouté. Ceci est fait dans le but de mettre sur un élément fixe de l'endroit où il devrait être situé. En outre, dans cet exemple, il est également effectué des contrôles par navigateur Internet Explorer 7, comme il ne gère pas correctement une position de valeur: fixe; .

Ne pas oublier de raccorder la bibliothèque jQuery!

Par ailleurs, à propos de la bibliothèque ... A partir de la version 1.9, jQuery ne supporte pas $ .browser. Par conséquent, pour utiliser cette structure, il est possible de connecter un fichier séparé cette fonction:

  (Function () {
 
  var adapté, navigateur;
 
 // Utilisation jQuery.browser pas approuvé.
 // Détails: http://api.jquery.com/jQuery.browser
 // JQuery.uaMatch pris en charge pour la compatibilité
 jQuery.uaMatch = function (ua) {
  ua = ua.toLowerCase ();
 
  match var = / (chrome) [\ /] ([\ w.] +) /. exec (ua) ||
  / (Webkit) [\ /] ([\ w.] +) /. Exec (ua) ||
  / (Opera) (: * Version |?.) [\ /] ([\ W.] +) / Exec (ua) ||.
  / (MSIE) ([\ w.] +) /. Exec (ua) ||
  ua.indexOf ( "compatible") <0 && /(mozilla)(?:.*? rv :( [\ W.] +) |) / Exec (ua) ||.
  [];
 
  retour {
  navigateur: correspondre [1] ||  ""
  Version: correspondre [2] ||  "0"
  };
  };
 
  appariés = jQuery.uaMatch (navigator.userAgent);
  browser = {};
 
  if (matched.browser) {
  navigateur [matched.browser] = true;
  browser.version = matched.version;
  }
 
 // Chrome est Webkit, mais Webkit est également Safari.
  if (browser.chrome) {
  browser.webkit = true;
  } Else if (browser.webkit) {
  browser.safari = true;
  }
 
  jQuery.browser = navigateur;
 
  jQuery.sub = function () {
  fonction jQuerySub (sélecteur, contexte) {
  return new jQuerySub.fn.init (sélecteur, contexte);
  }
  jQuery.extend (true, jQuerySub, this);
  jQuerySub.superclass = this;
  jQuerySub.fn = jQuerySub.prototype = ceci ();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub.sub = this.sub;
  jQuerySub.fn.init = function init (sélecteur, contexte) {
  if (contexte && contexte instanceof jQuery &&! (contexte instanceof jQuerySub)) {
  context = jQuerySub (contexte);
  }
 
  retour jQuery.fn.init.call (ce, sélecteur, contexte, rootjQuerySub);
  };
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (document);
  retour jQuerySub;
  };
 }) ();

bloc fixe dans WordPress barre latérale

Une autre alternative, mais beaucoup plus efficace: jQuery-plugin hcsticky .

Il a de nombreux paramètres, mais en même temps, est relativement simple à utiliser.

Branchez d'abord le jQuery et le plugin:

  <! - JQuery -> 
<Type Script = "text / javascript" src = "jquery.js"> </ script>
<! - Le script HcSticky ->
<Type Script = "text / javascript" src = "jquery.hcsticky.js"> </ script>

Ensuite, pour un élément qui devrait être flottante, appeler la méthode:

 $ ( '# Sidebar') hcSticky () .;

Tout. l'appareil est maintenant flottant.

Ce plugin est très utile surtout si vous voulez fixer le haut bloc. Mais lorsque vous faites défiler, il ne doit pas sortir des limites autorisées, telles que ramper sur futter.

Si l'utilisation de variantes qui ont été décrites ci-dessus, les blocs / menu ramper sur fond site, en particulier lorsque celui-ci a une plus grande hauteur.

Dans greffon hcsticky offre la possibilité, pour ainsi dire, d'arrêter l'unité flottante à une certaine distance du fond du site. exemple:

 $ (Document) .ready (function () {
  $ ( '# Sidebar'). HcSticky ({
  top: 25,
  bottomEnd: 155
  noContainer: true
  });
 });

Où:

  • top - décalage par rapport à la partie supérieure de la fenêtre du navigateur pendant le défilement
  • bottomEnd - tiret de la limite inférieure du site, lorsque le site défile vers le bas
  • noContainer - si true, l'élément est positionné par rapport au document