This page has been robot translated, sorry for typos if any. Original content here.

Comment réparer le bloc ou le menu sur le site

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

Comment créer un menu flottant fixe ou un bloc sur le site.

Il y a beaucoup de solutions. Oui, et vous pouvez écrire vous-même si vous comprenez JavaScript et jQuery.

Menu supérieur fixe sur le site

Probablement la solution jQuery la plus élégante et la plus simple. Code par exemple:

 $ (function () {$ (window) .scroll (function () {var top = $ (document) .scrollTop (); if (top <100) $ (". floating"). css ({top: '0 ', position:' relative '}); else $ (". floating"). css ({top:' 10px ', position:' fixed '})}};}); 

Ce code doit être inséré dans un fichier js séparé ou directement dans le balisage, après avoir placé le code </ script> dans la balise <script>.

Nous allons comprendre ce qui est ici. Donc, la fonction $ (fenêtre) .scroll (function () {}); surveille le défilement de la fenêtre. La variable top se voit attribuer la valeur du retrait de défilement à partir du top $ (document) .scrollTop ();. Ensuite, si la valeur supérieure est inférieure à 100 pixels, l'élément de style CSS est affecté à la classe .floating: le positionnement relatif et l'indentation à partir du haut sont égaux à 0 pixel. Si, lors du défilement de la page, la valeur de top est supérieure ou égale à 100 pixels, des styles sont attribués à l'élément .floating: une position fixe et un retrait du haut sont de 10 pixels.

Maintenant, lors du défilement, la page du menu sera toujours en haut.

Menu fixe de la barre latérale de WordPress

Il y a un plugin intéressant pour WordPress codeflavors-menu-flottant . Il peut être installé directement à partir du panneau d’administration de WordPress. Plugin pratique. Fonctionne avec les menus du site standard. Il a plusieurs paramètres. Assez facile à utiliser. Le site Web du développeur contient de la documentation sur ce plugin.

Si vous souhaitez créer un menu flottant sur WordPress, n'hésitez pas à utiliser ce plugin.

Bloc fixe / menu dans la barre de site jQuery

Si vous souhaitez créer non seulement un menu flottant, mais également un bloc dont le contenu est fixe, modifiez légèrement le code présenté ci-dessus.

  $ (document) .ready (fonction () {
  var br = $ .browser;
  $ (fenêtre) .scroll (function () {
  var top = $ (document) .scrollTop ();
  si (haut <61) {
  $ ("# sidebar"). css ({top: '0', position: 'relative', marginLeft: '25px'});
  } else if ((! br.msie) || ((br.msie) && (br.version> 7))) {
  $ ("# sidebar"). css ({top: '22px', position: 'fixed', marginLeft: '535px'});
  } else if ((br.msie) && (br.version <= 7)) {
  $ ("# sidebar"). css ({top: '22px', position: 'fixed', marginLeft: '25px'});
  }
  });
 });

Ce code est exactement le même, mais le style margin-left est ajouté. Ceci est fait afin de mettre un élément fixe à la place où il devrait être. De plus, dans cet exemple, une vérification a également été effectuée pour Internet Explorer 7 , car il ne gère pas correctement la valeur de position: fixed; .

N'oubliez pas de connecter la bibliothèque jQuery!

À propos, à propos de la bibliothèque ... À partir de la version 1.9, jQuery ne supporte pas la fonction $ .browser. Par conséquent, pour utiliser cette conception, vous pouvez activer cette fonction dans un fichier séparé:

  (fonction () {
 
  var apparié, navigateur;
 
 // Utiliser jQuery.browser n'est pas approuvé.
 // En savoir plus: http://api.jquery.com/jQuery.browser
 // jQuery.uaMatch pris en charge pour la compatibilité
 jQuery.uaMatch = function (ua) {
  ua = ua.toLowerCase ();
 
  var match = / (chrome) [\ /] ([\ w.] +) /. exec (ua) ||
  / (webkit) [\ /] ([\ w.] +) /. exec (ua) ||
  / (opéra) (?:. * version |) [\ /] ([\ w.] +) /. exec (ua) ||
  / (msie) ([\ w.] +) /. exec (ua) ||
  ua.indexOf ("compatible") <0 && / (mozilla) (? ::. ?? rv :( [\ w.] +) |) /. exec (ua) ||
  [];
 
  retour {
  navigateur: match [1] ||  "",
  version: match [2] ||  "0"
  };
  };
 
  apparié = jQuery.uaMatch (navigator.userAgent);
  navigateur = {};
 
  if (matched.browser) {
  navigateur [matched.browser] = true;
  browser.version = matched.version;
  }
 
 // Chrome est Webkit, mais Webkit est également Safari.
  si (browser.chrome) {
  browser.webkit = true;
  } sinon si (browser.webkit) {
  browser.safari = true;
  }
 
  jQuery.browser = navigateur;
 
  jQuery.sub = function () {
  fonction jQuerySub (sélecteur, contexte) {
  renvoie le nouveau jQuerySub.fn.init (sélecteur, contexte);
  }
  jQuery.extend (true, jQuerySub, this);
  jQuerySub.superclass = this;
  jQuerySub.fn = jQuerySub.prototype = this ();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub = this;
  jQuerySub.fn.init = fonction init (sélecteur, contexte) {
  if (contexte && instance de contexte de jQuery &&! (instance de contexte de jQuerySub)) {
  context = jQuerySub (context);
  }
 
  return jQuery.fn.init.call (this, sélecteur, contexte, rootjQuerySub);
  };
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (document);
  renvoyer jQuerySub;
  };
 }) ();

Bloc fixe dans la barre latérale de WordPress

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

Il a beaucoup de paramètres, mais dans le même temps, est assez simple à utiliser.

Tout d’abord, nous connectons jQuery et le plugin lui-même:

  <! - jQuery -> 
<script type = "text / javascript" src = "jquery.js"> </ script>
<! - Script hcSticky ->
<script type = "text / javascript" src = "jquery.hcsticky.js"> </ script>

Ensuite, pour l'élément qui devrait être flottant, nous appelons la méthode:

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

Tous Maintenant, le bloc va flotter.

Ce plugin est très utile surtout si vous voulez réparer un bloc haut. Mais lors du défilement, vous ne devez pas dépasser les limites autorisées, par exemple ramper sur un pied de page.

Si vous utilisez les options décrites ci-dessus, les blocs / menus parcourront le bas du site, en particulier lorsque celui-ci a une hauteur supérieure.

Le plugin hcsticky offre la possibilité, pour ainsi dire, d’arrêter le bloc flottant à une certaine distance du bas du site. Exemple:

 $ (document) .ready (fonction () {
  $ ('# sidebar'). hcSticky ({
  en haut: 25
  basFin: 155,
  noContainer: true
  });
 });

  • top - retrait du haut de la fenêtre du navigateur lors du défilement
  • bottomEnd - indent à partir du bas du site lorsque le site est défilé vers le bas
  • noContainer - si true, l'élément est positionné par rapport au document