Jak si vytvořit svůj vlastní lepkavý záhlaví lišty jako MakeUseOf

Asi před měsícem jsme představili nový prvek rozhraní pro MakeUseOf - plovoucí navigační a vyhledávací lištu. Zpětná vazba, kterou jsme získali, je téměř úplně pozitivní, interní provoz ve vyhledávání vzrostl a někteří čtenáři se ptali, jak si jednu vytvořit pro vlastní web, takže jsem si myslel, že se o ně podělím.

Použijeme jQuery k připevnění lišty k horní části obrazovky - ale pouze za určitý bod. Udělám to všechno ve výchozím motivu WordPress - dvacet jedenáct, i když to samozřejmě lze použít na jakékoli téma nebo web, kterému dostatečně rozumíte, jak upravit.

HTML

Nejprve otevřete témata header.php a identifikujte navigační lištu, kterou budeme dělat lepkavější. Jak jsem řekl, níže uvedený kód je pro výchozí dvacet jedenáct; vaše se může lišit.

Nejprve přidejte nový kontejner DIV obklopující celou tuto sekci NAV.

  …   

Pojďme sem také přesunout tento výchozí vyhledávací panel. Všimněte si, že je ve výchozím nastavení přidán do pravého horního rohu motivu; najdi linku a vložte ji do naší navigační sekce. Odstraňte všechny ostatní instance z tohoto souboru.

Pokud nyní uložíte a obnovíte, zobrazí se vyhledávací formulář ve skutečnosti na navigační liště - stále se zobrazuje v pravém horním rohu. Je to proto, že je to absolutně umístěno v CSS, a to vše odstraníme za vteřinu.

CSS

Otevřete hlavní soubor style.css a najděte sekci pro vyhledávací formulář:

 #branding #searchform …

Nahraďte cokoli, co je uvnitř, (mělo by být možné asi čtyři řádky, včetně určitého absolutního umístění) tímto:

 #branding #searchform float: left; pozadí: bílá; marže: 7px; 

Neváhejte upravit barvu nebo okraj. Vyměňte plovák, pokud byste raději vypadali na pravé straně lišty. V tomto motivu je vyhledávání nastaveno na rozšíření, když na něj uživatel klikne; to je mimo rozsah tohoto tutoriálu, ale můžete vidět podobný vliv na naše vyhledávání MakeUseOf.

jQuery

Pokud vás zajímá, proč k tomu používáme jQuery, je to jednoduché: CSS je pevná a nelze jej dynamicky upravovat. I když bychom mohli použít CSS k vytvoření lepivé hlavičky, muselo by to být horní prvek na stránce. Problém, který máme, je, že naše nabídka není horním prvkem, takže nemůžeme začít tím, že bude lepkavá. Zde se používá jQuery; můžeme zkontrolovat, kdy uživatel překročí určitý bod; pak, a teprve potom, je to lepkavé.

Začněte přidáním jQuery do svého motivu. Vaše téma ji již může načíst; pokud ne, žádné starosti. Můžete to buď enqueue, přidáním následujícího kódu do vaší functions.php, tak jako:

Nebo můžete WordPress úplně obejít a toto tvrdit do souboru záhlaví. Někde ve své hlavě stačí přidat tento řádek:

Pokud použijete první metodu, bude načtena noConflict což znamená, že budete muset použít “jQuery” ve vašem kódu pro přístup k funkcím jQuery. Pokud použijete druhou metodu přímého přidání do vaší hlavičky, můžete použít standardní jQuery accessor $. Předpokládám druhou metodu v níže uvedeném kódu.

Chcete-li přidat nějaký skutečný kód jQuery, umístěte následující místo někam na konec svého header.php - Umístil jsem důl těsně před

  // make nav sticky var stickyHeader = $ ('# access_alias'). offset (). top + 288; $ (window) .scroll (function () if ($ (window) .scrollTop ()> stickyHeader) $ ('# access'). css (position: 'fixed', top: '0px');  else $ ('# access'). css (position: 'static', top: '0px'););  

První věc, kterou skript dělá, je zjistit, kde začíná navigační lišta, a pamatuje si tuto hodnotu. Za druhé, připojujeme se k události posouvání - to znamená, že pokaždé, když uživatel posouvá stránku, můžeme spustit tento blok kódu. Při spuštění kódu existují dva způsoby:
1. Pokud se okno posouvalo za navigační lištu, uděláme z něj pevný CSS (toto je “lepkavý” část).
2. Pokud je horní část okna vyšší než původní poloha navigační lišty (tj. Uživatel se posunul zpět nahoru), vrátíme ji zpět na výchozí statickou polohu..

Chtěli bych vás upozornit na dva body:

• +288 je tam, aby opravil chybu získání nesprávné pozice; bez ní by lišta spustila svůj lepkavý stav příliš brzy - odstraněním, abyste viděli, co tím myslím. To nebude nutné ve všech tématech a pravděpodobně přijdete s lepším řešením.
• Chcete-li vyřešit problém změny šířky navigační lišty, když přejde do lepkavého stavu, upravte styl.css, řádek 550, aby se četl 1 000 pixelů namísto 100%

To je vše, váš navigační panel by nyní měl být pěkně lepkavý.

Souhrn:

Plná náhrada header.php kód tohoto tutoriálu najdete na tomto pastebinu; a náhrada style.css tady. Doufal jsem, že se vám tento malý návod líbil; Pokud máte problémy, zveřejněte komentáře v komentářích, ale nezapomeňte, aby byl váš web veřejně přístupný, abych mohl jít dál a podívat se sám. Pokud jste zde nový, podívejte se na všechny naše další články o bloggerech a vývoji webu.