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

Wie man einen Block oder ein Menü auf der Site repariert

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

Wie man ein festes schwebendes Menü oder Block auf der Site macht.

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

Fester Top-Menü auf der Website

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

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

Dieser Code muss in eine separate js-Datei oder direkt in das Markup eingefügt werden, nachdem der <script> code </ script> im Tag eingerahmt wurde.

Wir werden herausfinden, was hier vor sich geht. Also die Funktion $ (window) .scroll (function () {}); scrollt das Fenster. Die oberste Variable wird auf den Wert des Bildlaufeinzugs von oben gesetzt. $ (Document) .scrollTop ();. Weiter wird überprüft, ob der Wert von top weniger als 100 Pixel beträgt, dann wird dem Element mit der floating-Klasse CSS-Stile zugewiesen: relative Positionierung und Einrückung von oben - 0 Pixel. Wenn beim Scrollen der Seite der Wert von top größer oder gleich 100 Pixel ist, werden dem floating-Element Stile zugewiesen: eine feste Position und ein Einzug von oben - 10 Pixel.

Wenn Sie nun auf der Seite blättern, ist das Menü immer oben.

Das festgelegte Menü in der WordPress-Seitenleiste

Für WordPress gibt es ein interessantes Plugin CodeFlavors-Floating-Menü . Es kann direkt über das Admin-Panel von WordPress installiert werden. Praktisches Plugin. Funktioniert mit dem Standardmenü der Site. Hat mehrere Einstellungen. Einfach genug zu benutzen. Die Website des Entwicklers enthält eine Dokumentation für dieses Plugin.

Wenn Sie es zu einem schwebenden Menü auf WordPress machen möchten, dann zögern Sie nicht, dieses Plugin zu verwenden.

Block / Menü in der Seitenleiste der Site in jQuery wurde korrigiert

Wenn Sie nicht nur ein schwebendes Menü, sondern einen Block mit einem beliebigen Inhalt erstellen möchten, müssen Sie den obigen Code leicht ändern.

  $ (Dokument) .ready (Funktion () {
  var br = $ .browser;
  $ (Fenster) .scroll (Funktion {) {
  var top = $ (Dokument) .scrollTop ();
  if (oben <61) {
  $ ("# sidebar"). css ({top: '0', position: 'relativ', marginLeft: '25px'});
  } sonst if ((! br.msie) || ((br.msie) && (br.version> 7))) {
  $ ("# sidebar"). css ({oben: '22px', position: 'fixed', marginLeft: '535px'});
  } sonst if ((br.msie) && (br.version <= 7)) {
  $ ("# sidebar"). css ({top: '22px', Position: 'fixed', marginLeft: '25px'});
  }
  });
 });

Dieser Code ist genau derselbe, aber der margin-left Stil wird hinzugefügt. Dies geschieht, um das feste Element an der Stelle zu platzieren, an der es sich befinden soll. Darüber hinaus wird in diesem Beispiel auch eine Überprüfung für den Internet Explorer 7- Browser durchgeführt. Position wird nicht korrekt gehandhabt : fixiert; .

Vergiss nicht, die jQuery-Bibliothek zu verbinden!

By the way, über die Bibliothek ... Seit Version 1.9 unterstützt jQuery die $ .browser-Funktion nicht. Um dieses Design zu verwenden, können Sie diese Funktion daher als separate Datei verbinden:

  (Funktion {) {
 
  var abgestimmt, Browser;
 
 // Verwenden Sie jQuery.browser ist nicht zugelassen.
 // Weitere Informationen: 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) ||
  / (Opera) (?:. * Version |) [\ /] ([\ w.] +) /. exec (ua) ||
  / (msie) ([\ w.] +) /. exec (ua) ||
  ua.indexOf ("kompatibel") <0 && /(mozilla)(?:.*? rv :( [\ w.] +) |) /. exec (ua) ||
  [];
 
  zurück {
  Browser: Übereinstimmung [1] ||  "",
  Version: Übereinstimmung [2] ||  "0"
  };};
  };};
 
  matched = jQuery.uaMatch (navigator.userAgent);
  Browser = {};
 
  if (matched.browser) {
  browser [matched.browser] = true;
  browser.version = matched.version;
  }
 
 // Chrome ist Webkit, aber Webkit ist auch Safari.
  if (browser.chrome) {
  browser.webkit = wahr;
  } sonst if (browser.webkit) {
  browser.safari = wahr;
  }
 
  jQuery.browser = Browser;
 
  jQuery s = Funktion () {
  Funktion jQuerySub (Selektor, Kontext) {
  return new jQuerySub.fn.init (Selektor, Kontext);
  }
  jQuery.extend (true, jQuerySub, this);
  jQuerySub.superclass = Dies;
  jQuerySub.fn = jQuerySub.prototype = Dies ();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub_ = this;
  jQuerySub.fn.init = Funktion init (Selektor, Kontext) {
  if (Kontext && Kontextinstanz von jQuery &&! (Kontextinstanz von jQuerySub)) {
  Kontext = jQuerySub (Kontext);
  }
 
  return jQuery.fn.init.call (dies, selector, context, rootjQuerySub);
  };};
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (Dokument);
  return jQuerySub;
  };};
 }) ();

Fester Block in der WordPress Sidebar

Eine andere Alternative, aber viel effektiver: jQuery-Plugin hcsticky .

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

Zunächst verbinden wir jQuery und das Plugin selbst:

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

Rufen Sie dann für das Element, das floating sein soll, die Methode auf:

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

Das ist alles. Jetzt wird der Block schweben.

Dieses Plugin ist besonders nützlich, wenn Sie einen hohen Block reparieren möchten. Beim Scrollen sollte er jedoch nicht aus den erlaubten Grenzen herauskommen, zum Beispiel auf einem Fuß kriechen.

Wenn Sie die Optionen verwenden, die oben beschrieben wurden, werden die Blöcke / Menüs an den unteren Rand der Site crawlen, besonders wenn der letztere eine große Höhe hat.

Das Plugin hcsticky bietet sozusagen die Möglichkeit, den schwebenden Block in einer bestimmten Entfernung vom unteren Rand der Seite zu stoppen. Beispiel:

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

Wo:

  • top - Einzug vom oberen Rand des Browserfensters beim Scrollen
  • bottomEnd - Einzug von der Unterseite der Site, wenn die Site nach unten gescrollt wird
  • noContainer - Wenn der Wert auf "true" gesetzt ist, wird das Element relativ zum Dokument positioniert