Floating Sidebar

Hindurch des Plug-ins Strx Magic Floating Sidebar Maker scrollt wie schwimmt die Sidebar dezent dem Seiteninhalt einher […].

Aber unerfreulicherweise ist die Responsivität des Menüs dahin und daher vorab Info, zur Eingabe in den CSS Stylesheet Editor:

/*Responsive Strx Magic Floating Sidebar Maker*/
@media screen and (max-width: 959px) {
 #secondary {
 position: relative !important;
 left: 0 !important;
 top: 0 !important;
 }
}

… und Strx Floating Sidebar ist Responsive funktionell. Themenspezifisch ist darauf zu achten, welchen Code des Menüs zu verwenden ist. Theme Twenty Fourteen ist es #secondary.

Strx Floating Sidebar Settings
(Übersetzung, teils von Google)

Sidebar und Selector
(Voreinstellung)

#content
#secondary

Anpassbare Voreinstellungen:

  • (3000 ms/3 sec) Warten der Zeit (in Millisekunden) vor der Aktivierung des Plugins, nachdem die Seite geladen wurde.
  • (500 ms/0,5 sec) Zeit (in Millisecunden) der Inaktivität vor jedem neuen positionieren der Seitenleiste; also die Seitenleiste bewegt sich erst nach dieser Zeit, wenn der Benutzer aufgehört hat zu Scrollen nach oben oder unten.
  • (500 ms/0,5 sec) Animieren der Geschwindigkeit (in Millisekunden); also wie viel Zeit der Seitenleiste gegeben wird, um sich mit dem Inhalt auszurichten.
Die folgenden Einstellungen sind für ein Pixel perfektes Ergebnis einzustellen; (nimmt positive und negative Werte).
  • (15) Offset Top; Überschrift der Seitenleiste unter dem mitgehenden Header konkreter Positionierung.
  • (900) Offset Bottom; versetzt das Ende der Seitenleiste, beim scrollen und folgen derer. Die Seitenleiste kann durch bestimmen der Höhe des Endes, so eingestellt werden, dass sich das Ende jeweils knapp ober dem sichtbaren Bereich justiert.
Mit beiden jeweiligen, unterschiedlichen Einstellungen konnte ich hier keine Konformität herstellen:
  • Mindesthöhenunterschied; if (Behälterhöhe – Seitenleiste Höhe <minHDiff) dann ist das Plugin nicht aktiviert; und wenn (folgend) „dynamicTop“ aktiviert ist, wird diese Option nicht in Betracht gezogen.
  • „dynamicTop“: Erforderlich, wenn Sie Seitenlänge dynamisch zu ändern, mit Ajax, CSS oder andere Methoden.
Einstellungen weiters nicht getestet, weil kein gebrauch:

HTML-Selektor um der Seitenleiste wissen zu lassen, wo der Inhalt ist. Sie können dies für Firefox oder Chrome Konsole Utilities wie Firebug inspizieren Verwendung finden, aber wenn Sie nicht vertraut mit diesen Programmierwerkzeugen, habe ich ein kleines Programm entwickelt, das auf Blog, Fußzeile alle Seiten Selektoren zeigen und auf sie ändert Blockhintergrund.

  • jsInHead: Setzen Sie Javascript in Header statt Fußzeile (einige wp Themen nicht unterstützt wp_footer Aktion).
  • DEBUG: Wenn diese Option aktiviert und bei Seitenaufruf, nützliche Informationen über die Konsole (nicht für Internet Explorer).

Aktivieren sie die FINDIDS Option unten und laden Sie Ihre Blog-Seite, überprüft, dann klicken Sie auf IDs angezeigt, sie zu identifizieren.

  • FINDIDS: Wenn diese Option aktiviert und bei Seitenaufruf, wird eine Liste von IDs auf Ihre Fußzeile gedruckt; die Inhalte- und die Seitenleiste Abschnitte sind so zu identifizieren; auf sie klicken und sehen, was passiert.
  • ÜBERBLICK: Wenn diese Option aktiviert und bei Seitenaufruf, werden mit einer gestrichelten roten Linie die Abschnitte skizziert, die man als Inhalt und Seitenleiste definiert hat, hilft zu wissen, ob sie richtig sind.