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

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

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

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

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 haut $ (document) .scrollTop ();. Ensuite, si la valeur maximale est inférieure à 100 pixels, l'élément de style CSS est affecté à la classe .floating: le positionnement relatif et l'indentation 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, l'élément .floating se voit attribuer les styles: position fixe et retrait au sommet - 10 pixels.

Maintenant, lorsque vous faites défiler 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 WordPress. Plugin pratique. Fonctionne avec les menus du site standard. Il a plusieurs paramètres. Assez facile à utiliser. La documentation du développeur contient de la documentation sur ce plugin.

Si vous voulez créer exactement le 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 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 a été 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) ||
  [];
 
  return {
  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 ();

Tout 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, il ne doit pas aller au-delà des 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 ce dernier a une hauteur supérieure.

Le plugin hcsticky fournit 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 défile vers le bas
  • noContainer - si la valeur est true, l'élément est positionné par rapport au document