Wie Sie einen Block oder Menü Online zu beheben

Wie man die Seite machen ein festes Menü oder eine Floating - Einheit.

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

Feste um das Hauptmenü auf der Website

Vielleicht ist die elegante und einfache Lösung für jQuery. zum Beispiel Code:

 $ (Function () {$ (Fenster) .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 eingefügt werden oder direkt in das Markup, eingerahmt in einem <script> Tag-Code </ script>.

Lassen Sie uns untersuchen, was hier ist. So kann die Funktion $ (Fenster) .scroll (function () {}); überwacht das Scrollen Fenster. Die Variable wird indent Scroll oben $ nach oben (document) .scrollTop ();. Prüfen Sie dann, ob die Spitze weniger als 100 Pixel ist, das Element mit der Klasse zugewiesen .floating CSS-Stile: die relative Positionierung und oberen Rand - 0 Pixel. Wenn das obere Wert Scrollen größer oder gleich 100 Pixel, dann zugewiesen das Element Stile .floating: feste Position und den oberen Rand - 10 Pixel.

Nun, wenn Sie blättern durch die Menüseiten wird immer oben sein.

Feste Menü in Wordpress Sidebar

Es ist ein interessantes Plugin für Wordpress codeflavors-Floating-Menü . Es kann direkt aus dem Wordpress-Admin-Panel installiert werden. Bequem-Stecker. Es arbeitet mit Standard-Menü der Website. Er hat mehrere Optionen. Es genügt, einfach zu bedienen. Die Site-Entwickler haben Dokumentation für dieses Plugin.

Wenn Sie es ein schwebendes Menü in Wordpress machen wollen, dann fühlen sich frei, dieses Plugin zu verwenden.

Feste Block / Menü in der Seitenleiste auf der jQuery-Website

Wenn Sie nicht nur das schwebende Menü machen wollen, sondern auch alle Inhalte fixiert zu blockieren, dann dafür müssen Sie leicht den Code in oben ändern.

  $ (Dokument) .ready (function () {
  var br = $ .Browser;
  $ (Fenster) .scroll (function () {
  var top = $ (document) .scrollTop ();
  if (top <61) {
  $ ( "# Sidebar") CSS ({top: '0', position: relative "margin: '25px'}) ;.
  } Else if ((! Br.msie) || ((br.msie) && (br.version> 7))) {
  $ ( "# Sidebar") CSS ({top: '22px', position: 'fixed', margin: '535px'}) ;.
  } Else if ((br.msie) && (br.version <= 7)) {
  $ ( "# Sidebar") CSS ({top: '22px', position: 'fixed', margin: '25px'}) ;.
  }
  });
 });

Dieser Code ist genau das gleiche, fügte aber hinzu , margin-left - Stil. Dies wird getan, um auf einem festen Element des Ortes zu setzen, wo sie sich befinden sollte. Zusätzlich wird in diesem Beispiel wird es durch auch Kontrollen für Browser Internet Explorer 7 aus, als es ist nicht richtig Wert Position Griff: fixed; .

Vergessen Sie nicht die jQuery - Bibliothek zu verbinden!

By the way, über die Bibliothek ... Ab Version 1.9, wird jQuery nicht $ .Browser unterstützen. Daher diese Struktur zu verwenden, ist es möglich, eine separate Datei diese Funktion zu verbinden:

  (Function () {
 
  var abgestimmt, Browser;
 
 // Verwenden jQuery.browser nicht zugelassen.
 // Details: http://api.jquery.com/jQuery.browser
 // JQuery.uaMatch zur Kompatibilität unterstützt
 jQuery.uaMatch = function (ua) {
  ua = ua.toLowerCase ();
 
  var match = / (Chrom) [\ /] ([\ w.] +) /. exec (ua) ||
  / (Webkit) [\ /] ([\ w.] +) /. Exec (ua) ||
  / (Oper) (* Version |?). [\ /] ([\ W.] +) / Exec (ua) ||.
  / (Msie) ([\ w.] +) /. Exec (ua) ||
  ua.indexOf ( "kompatibel") <0 && /(mozilla)(?:.*? rv  [\ W.] +) |) / Exec (ua) ||.
  [];
 
  Rückkehr {
  Browser: match [1] ||  ""
  Version: match [2] ||  "0"
  };
  };
 
  abgestimmt = 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 = 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 = function init (Selektor, Kontext) {
  if (Kontext && Kontext Instanceof jQuery &&! (Kontext Instanceof jQuerySub)) {
  context = jQuerySub (Kontext);
  }
 
  Rückkehr jQuery.fn.init.call (this, Selektor, Kontext, rootjQuerySub);
  };
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (document);
  Rückkehr jQuerySub;
  };
 }) ();

Feste Block in Wordpress Sidebar

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

Es hat viele Einstellungen, aber zur gleichen Zeit, ist relativ einfach zu verwenden.

Zuerst das jQuery und das Plugin:

  <! - JQuery -> 
 <Script type = "text / javascript" src = "jquery.js"> </ script> 
 <! - HcSticky Skript -> 
 <Script type = "text / javascript" src = "jquery.hcsticky.js"> </ script> 

Dann gilt für ein Element, das zu schweben sollte, rufen Sie die Methode:

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

Alles. Nun ist die Einheit schwimmt.

Dieses Plugin ist sehr nützlich, vor allem wenn man den hohen Block zu beheben möchten. Aber wenn man blättern sollte es nicht aus den zulässigen Grenzen zu erhalten, wie auf futter kriecht.

Wenn die Verwendung von Varianten, die oben beschrieben worden sind, kriechen die Blöcke / Menü wird auf Böden Ort, insbesondere, wenn diese eine größere Höhe aufweist.

In hcsticky Plugin bietet eine Gelegenheit, so zu sprechen, die Floating-Einheit in einem bestimmten Abstand von der Unterseite der Website zu stoppen. Beispiel:

 $ (Dokument) .ready (function () {
  $ ( '# Sidebar'). HcSticky ({
  top: 25,
  bottomEnd: 155
  noContainer: true
  });
 });

wo:

• top - von oben im Browserfenster Offset beim Scrollen
• bottomEnd - Einzug von der unteren Grenze des Geländes, wenn die Seite nach unten gescrollt
• noContainer - falls dies wahr ist , wird das Element positioniert relativ zu dem Dokument