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

So beheben Sie den Block oder das Menü auf der Website

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

So erstellen Sie ein festes, schwebendes Menü oder Block auf der Site.

Es gibt viele Lösungen. Ja, und Sie können selbst schreiben, wenn Sie JavaScript und jQuery verstehen.

Festes Hauptmenü auf der Site

Wahrscheinlich die eleganteste und einfachste jQuery-Lösung. Code zum Beispiel:

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

Dieser Code muss in eine separate js-Datei oder direkt in das Markup eingefügt werden, wobei der Code </ script> im <script> -Tag eingeschlossen ist.

Wir werden verstehen, was hier ist. Also die Funktion $ (window) .scroll (function () {}); überwacht das Scrollen des Fensters. Der Variablen top wird der Wert des Bildlauf-Einzugs oben $ (document) .scrollTop (); zugewiesen. Dann wird geprüft, ob der obere Wert weniger als 100 Pixel beträgt, dann wird das Element im CSS-Stil der fließenden Klasse zugewiesen: relative Positionierung und Einzug von oben sind 0 Pixel. Wenn beim Scrollen der Seite der Wert von top größer oder gleich 100 Pixel ist, werden dem Floating-Element die Stile zugewiesen: feste Position und Einzug von oben - 10 Pixel.

Beim Scrollen befindet sich die Menüseite immer oben.

WordPress Sidebar Fixed Menü

Es gibt ein interessantes Plugin für WordPress Codeflavors-Floating-Menü . Es kann direkt aus dem WordPress-Admin-Panel installiert werden. Praktisches Plugin. Funktioniert mit Standard-Site-Menüs. Es hat mehrere Einstellungen. Einfach zu bedienen. Auf der Entwickler-Website gibt es eine Dokumentation zu diesem Plugin.

Wenn Sie ein schwebendes Menü in WordPress erstellen möchten, können Sie dieses Plugin verwenden.

Block / Menü in der jQuery-Site-Leiste behoben

Wenn Sie nicht nur ein schwebendes Menü, sondern auch einen Block mit festem Inhalt erstellen möchten, müssen Sie dazu den oben gezeigten Code leicht modifizieren.

  $ (Dokument) .ready (Funktion () {
  var br = $ .browser;
  $ (window) .scroll (function () {
  var top = $ (document) .scrollTop ();
  if (oben <61) {
  $ ("# sidebar"). css ({top: '0', Position: 'relativ', 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'});
  }
  });
 });

Dieser Code ist genau derselbe, jedoch wird der linke Randstil hinzugefügt. Dies geschieht, um ein festes Element dort zu platzieren, wo es sich befinden soll. Außerdem wurde in diesem Beispiel seit Internet Explorer 7 auch eine Prüfung durchgeführt Der Wert der Position wird nicht korrekt verarbeitet : Fixed; .

Vergessen Sie nicht, die jQuery-Bibliothek anzuschließen!

Übrigens über die Bibliothek ... Ab Version 1.9 unterstützt jQuery die $ .browser-Funktion nicht. Um diesen Entwurf zu verwenden, können Sie diese Funktion daher in einer separaten Datei aktivieren:

  (Funktion () {
 
  var abgestimmt, Browser;
 
 // Verwenden Sie jQuery.browser ist nicht genehmigt.
 // Lesen Sie mehr: http://api.jquery.com/jQuery.browser
 // jQuery.uaMatch wird aus Kompatibilitätsgründen unterstützt
 jQuery.uaMatch = Funktion (ua) {
  ua = ua.toLowerCase ();
 
  var match = / (chrome) [\ /] ([\ w.] +) /. exec (ua) ||
  / (Webkit) [\ /] ([\ w.] +) /. exec (ua) ||
  / (Oper) (?:. * Version |) [\ /] ([\ w.] +) /. exec (ua) ||
  / (msie) ([\ w.] +) /. exec (ua) ||
  ua.indexOf ("compatible") <0 && / (Mozilla) (? ::. ?? rv.) :( [\ w.] +) |) /. exec (ua) ||
  [];
 
  zurückkehren
  Browser: Übereinstimmung [1] ||  "",
  Version: Übereinstimmung [2] ||  "0"
  };
  };
 
  matched = jQuery.uaMatch (navigator.userAgent);
  Browser = {};
 
  if (matched.browser) {
  browser [matched.browser] = true;
  browser.version = übereinstimmende.version;
  }
 
 // Chrome ist Webkit, aber Webkit ist auch Safari.
  if (browser.chrome) {
  browser.webkit = true;
  } else if (browser.webkit) {
  browser.safari = true;
  }
 
  jQuery.browser = Browser;
 
  jQuery.sub = function () {
  Funktion jQuerySub (Selektor, Kontext) {
  return new jQuerySub.fn.init (Selektor, Kontext);
  }
  jQuery.extend (true, jQuerySub, this);
  jQuerySub.superclass = this;
  jQuerySub.fn = jQuerySub.prototype = this ();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub_sub = this_sub;
  jQuerySub.fn.init = Funktion init (Selektor, Kontext) {
  if (Kontext && Kontextinstanz von jQuery &&! (Kontextinstanz von jQuerySub)) {
  context = jQuerySub (Kontext);
  }
 
  return jQuery.fn.init.call (this, Selector, Kontext, rootjQuerySub);
  };
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (Dokument);
  return jQuerySub;
  };
 }) ();

Behobener Block in der WordPress-Seitenleiste

Eine andere Alternative, aber viel effektiver: jQuery hcsticky plugin .

Es hat viele Einstellungen, ist aber gleichzeitig sehr einfach zu bedienen.

Zunächst verbinden wir jQuery und das Plugin selbst:

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

Dann rufen wir für das Element, das fließend sein soll, die Methode auf:

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

Alle Jetzt wird der Block schweben.

Dieses Plugin ist besonders nützlich, wenn Sie einen hohen Block reparieren möchten. Beim Scrollen sollte es jedoch nicht über die zulässigen Grenzen hinausgehen, beispielsweise auf eine Fußzeile kriechen.

Wenn Sie die oben beschriebenen Optionen verwenden, wird das Menü Blöcke / Blöcke zum unteren Rand der Website gecrawlt, insbesondere wenn diese eine höhere Höhe hat.

Das hcsticky-Plugin bietet sozusagen die Möglichkeit, den Floating-Block in einem bestimmten Abstand vom Boden der Site anzuhalten. Beispiel:

 $ (Dokument) .ready (Funktion () {
  $ ('# sidebar'). hcSticky ({
  oben: 25,
  bottomEnd: 155,
  noContainer: wahr
  });
 });

Wo

  • top - eingerückt vom oberen Rand des Browserfensters beim Scrollen
  • bottomEnd - Einzug vom unteren Rand der Site, wenn die Site nach unten gescrollt wird
  • noContainer - Bei true wird das Element relativ zum Dokument positioniert