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 faire un menu flottant fixe ou bloquer 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 la plus élégante et la plus simple sur jQuery. Code par exemple:

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

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

Nous allons comprendre ce qui se passe ici. Donc la fonction $ (window) .scroll (function () {}); fait défiler la fenêtre. La variable supérieure est définie sur la valeur de l'indentation de défilement à partir de $ (document) .scrollTop (); De plus, on vérifie si la valeur de top est inférieure à 100 pixels, puis on assigne à l'élément avec la classe .floating des styles CSS: positionnement relatif et indentation du haut - 0 pixels. Si, lors du défilement de la page, la valeur de top est supérieure ou égale à 100 pixels, l'élément .floating est affecté de styles: une position fixe et un retrait du haut - 10 pixels.

Maintenant, lorsque vous faites défiler la page, le menu sera toujours au-dessus.

Le menu fixe dans la barre latérale de WordPress

Pour WordPress il y a un plugin intéressant codeflavors-floating-menu . Il peut être installé directement à partir du panneau d'administration de WordPress. Plugin pratique. Fonctionne avec le menu standard du site. A plusieurs paramètres. Assez facile à utiliser. Le site Web du développeur a la documentation pour ce plugin.

Si vous voulez en faire un menu flottant sur WordPress, n'hésitez pas à utiliser ce plugin.

Bloc / menu fixe dans la barre latérale du site sur jQuery

Si vous voulez faire non seulement un menu flottant, mais un bloc avec un contenu fixe, alors pour cela vous devez modifier légèrement le code qui est donné ci-dessus.

  $ (document) .ready (function () {
  var br = $ .browser;
  $ (window) .scroll (function () {
  var top = $ (document) .scrollTop ();
  if (top <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 marge-gauche est ajouté. Ceci est fait afin de placer l'élément fixe sur l'endroit où il devrait être situé. En outre, dans cet exemple, une vérification est également effectuée pour le navigateur Internet Explorer 7 . il ne gère pas correctement la position: fixe; .

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

À propos de la bibliothèque ... Depuis la version 1.9, jQuery ne supporte pas la fonction $ .browser. Par conséquent, pour utiliser cette conception, vous pouvez connecter cette fonction en tant que fichier distinct:

  (function () {
 
  var apparié, navigateur;
 
 // Utiliser jQuery.browser n'est pas approuvé.
 // Plus d'informations: http://api.jquery.com/jQuery.browser
 // jQuery.uaMatch est pris en charge pour la compatibilité
 jQuery.uaMatch = fonction (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"
  };};
  };};
 
  matched = jQuery.uaMatch (navigator.userAgent);
  navigateur = {};
 
  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 = this ();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub.sub = this.sub;
  jQuerySub.fn.init = fonction init (sélecteur, contexte) {
  if (contexte && instance instanceof jQuery &&! (contexte instanceof jQuerySub)) {
  context = jQuerySub (contexte);
  }
 
  return jQuery.fn.init.call (ceci, sélecteur, contexte, rootjQuerySub);
  };};
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (document);
  return jQuerySub;
  };};
 }) ();

Bloc fixe dans la barre latérale de WordPress

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

Il a beaucoup de paramètres, mais, en même temps, il est assez facile à utiliser.

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

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

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

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

C'est tout. Maintenant, le bloc va flotter.

Ce plugin est très utile surtout si vous voulez réparer un bloc haut. Mais en faisant défiler, il ne devrait pas sortir des limites permises, par exemple, ramper sur un pied.

Si vous utilisez les options décrites ci-dessus, les blocs / menus seront ramenés au bas du site, en particulier lorsque celui-ci a une grande hauteur.

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

 $ (document) .ready (function () {
  $ ("# sidebar"). hcSticky ({
  haut: 25,
  bottomEnd: 155,
  noContainer: true
  });
 });

Où:

  • top - indente du haut de la fenêtre du navigateur lors du défilement
  • bottomEnd - indente du bas du site lorsque le site défile vers le bas
  • noContainer - si défini sur true, l'élément est positionné par rapport au document