Hoe maak je je eigen Sticky Header Bar zoals MakeUseOf

Ongeveer een maand geleden introduceerden we een nieuw interface-element voor MakeUseOf - een zwevende navigatie- en zoekbalk. De feedback die we hebben gekregen, is bijna volledig positief, het interne zoekverkeer is explosief gestegen en sommige lezers hebben gevraagd hoe ze er een konden maken voor hun eigen site, dus ik dacht dat ik zou delen.

We gebruiken jQuery om de balk boven aan het scherm te houden - maar pas op een bepaald punt. Ik zal dit allemaal doen in het standaard WordPress-thema - Twenty Eleven, hoewel het natuurlijk kan worden toegepast op elk thema of elke website die je voldoende begrijpt om te wijzigen.

De HTML

Open eerst de thema's header.php en identificeer de navigatiebalk die we plakken. Zoals ik al zei, is de onderstaande code voor de standaardperiode van twintig-elf; de jouwe kan variëren.

Voeg ten eerste een nieuwe DIV-container toe die dit hele NAV-gedeelte omringt.

Laten we ook die standaardzoekbalk hierheen verplaatsen. U zult merken dat het standaard bovenaan in het thema is toegevoegd; zoek de lijn en plak het in onze navigatie sectie. Verwijder alle andere exemplaren ervan in dit bestand.

Als u nu opslaat en vernieuwt, ziet u dat het zoekformulier niet daadwerkelijk in de navigatiebalk wordt weergegeven, maar nog steeds in de rechterbovenhoek. Dat komt omdat het absoluut is gepositioneerd met CSS, en dat zullen we allemaal in een oogwenk verwijderen.

De CSS

Open het hoofdbestand style.css en zoek het gedeelte voor het zoekformulier:

 #branding #searchform ...

Vervang hiermee wat erin zit (zou ongeveer vier regels moeten kunnen bevatten, inclusief een aantal absolute positioneringen):

 #branding #searchform float: left; achtergrond: wit; marge: 7px; 

Voel je vrij om de kleur of marge aan te passen. Verander de vlotter als je liever deze aan de rechterkant van de balk ziet. In dit thema wordt de zoekopdracht ingesteld om uit te vouwen wanneer de gebruiker erin klikt; dat is buiten het bestek van deze tutorial, maar je kunt een vergelijkbaar effect zien op onze MakeUseOf Search.

jQuery

Als je je afvraagt ​​waarom we jQuery gebruiken om dit te doen, is het simpel: CSS is opgelost en kan niet dynamisch worden aangepast. Hoewel we CSS zouden kunnen gebruiken om een ​​plakkerige koptekst te maken, zou dit het belangrijkste element op de pagina moeten zijn. Het probleem dat we hebben is dat ons menu niet het belangrijkste element is, dus we kunnen niet beginnen met dat het plakkerig is. Dit is waar de jQuery wordt gebruikt; we kunnen controleren wanneer de gebruiker een bepaald punt overschrijdt; dan, en pas dan, maak het plakkerig.

Begin met het toevoegen van jQuery aan uw thema. Uw thema kan het al hebben geladen; zo niet, geen zorgen. Je kunt het in de wachtrij plaatsen door de volgende code toe te voegen aan je functions.php, zoals zo:

Of je kunt WordPress gewoonweg omzeilen en dit in het headerbestand hard maken. Voeg ergens in je hoofdgedeelte deze regel toe:

Als u de eerste methode gebruikt, wordt deze geladen geen conflict modus, wat betekent dat je moet gebruiken “jQuery” in uw code voor toegang tot jQuery-functies. Als je de tweede methode gebruikt om het direct aan je header toe te voegen, kun je de standaard jQuery-accessor van gebruiken $. Ik zal de tweede methode in de onderstaande code aannemen.

Dus, om wat echte jQuery-code toe te voegen, plaats het volgende ergens aan het einde van uw header.php - Ik heb de mijne net voor de