Jak zrobić własny lepki pasek nagłówka, taki jak MakeUseOf

Około miesiąc temu wprowadziliśmy nowy element interfejsu do MakeUseOf - ruchomy pasek nawigacji i wyszukiwania. Informacje zwrotne, które otrzymujemy, są niemal całkowicie pozytywne, gwałtownie wzrosła liczba wyszukiwań wewnętrznych, a niektórzy czytelnicy pytali, jak stworzyć własną witrynę, więc pomyślałem, że podzielę się.

Użyjemy jQuery do przyklejenia paska na górze ekranu - ale tylko do pewnego momentu. Zrobię to wszystko w domyślnym motywie WordPress - Twenty Eleven, choć oczywiście można go zastosować do dowolnego motywu lub strony internetowej, które wystarczająco rozumiesz, jak modyfikować.

HTML

Najpierw otwórz motywy header.php i wskaż pasek nawigacyjny, który będzie lepki. Jak powiedziałem, poniższy kod jest domyślny dla dwadzieścia jedenastu; twoje mogą się różnić.

Po pierwsze, dodaj nowy pojemnik DIV otaczający całą sekcję NAV.

  …   

Przenieśmy też ten domyślny pasek wyszukiwania tutaj. Zauważysz, że jest dodawany domyślnie w prawym górnym rogu motywu; znajdź linię i wklej go do naszej sekcji nawigacji. Usuń wszystkie inne jego wystąpienia z tego pliku.

Jeśli zapiszesz i odświeżysz teraz, zobaczysz, że formularz wyszukiwania nie pojawia się na pasku nawigacyjnym - nadal jest wyświetlany w prawym górnym rogu. To dlatego, że został umieszczony absolutnie w CSS, a my to wszystko usuniemy za sekundę.

CSS

Otwórz główny plik style.css i znajdź sekcję formularza wyszukiwania:

 #branding #searchform …

Zastąp wszystko, co jest w środku (powinno być w stanie zawierać około czterech linii, w tym pewne pozycjonowanie bezwzględne):

 #branding #searchform float: left; tło: biały; margines: 7 pikseli; 

Dostosuj kolor lub margines. Zmień liczbę zmiennoprzecinkową, jeśli wolisz, aby pojawiała się po prawej stronie paska. W tym temacie wyszukiwanie jest rozszerzone, gdy użytkownik kliknie w nim; jest to poza zakresem tego samouczka, ale możesz zobaczyć podobny efekt w naszej wyszukiwarce MakeUseOf.

jQuery

Jeśli zastanawiasz się, dlaczego używamy do tego jQuery, jest to proste: CSS jest naprawiony i nie można go dynamicznie dostosowywać. Chociaż możemy użyć CSS do stworzenia lepkiego nagłówka, musiałby to być górny element strony. Problemem jest to, że nasze menu nie jest najwyższym elementem, więc nie możemy zacząć od tego, że jest lepki. To jest, gdzie jest używany jQuery; możemy sprawdzić, kiedy użytkownik przekroczy określony punkt; wtedy i tylko wtedy uczyń go lepkim.

Zacznij od dodania jQuery do swojego motywu. Twój motyw może już go załadować; jeśli nie, nie martw się. Możesz go kolejkować, dodając następujący kod do pliku functions.php, w ten sposób:

Lub możesz po prostu całkowicie pominąć WordPressa i włączyć to do pliku nagłówkowego. Gdzieś w sekcji głowy po prostu dodaj ten wiersz:

Jeśli użyjesz pierwszej metody, zostanie ona załadowana noConflict tryb, co oznacza, że ​​będziesz musiał użyć “jQuery” w kodzie, aby uzyskać dostęp do funkcji jQuery. Jeśli użyjesz drugiej metody bezpośredniego dodania jej do nagłówka, możesz użyć standardowego akcesorium jQuery $. Przyjmę drugą metodę w poniższym kodzie.

Tak więc, aby dodać rzeczywisty kod jQuery, umieść go gdzieś na końcu swojego header.php - Moje umieściłem tuż przed

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

Pierwszą rzeczą, jaką robi skrypt, jest ustalenie, od czego zaczyna się pasek nawigacji, i zapamiętanie tej wartości. Po drugie, dołączamy do zdarzenia przewijania - oznacza to, że za każdym razem, gdy użytkownik przewija stronę, możemy uruchomić ten blok kodu. Po uruchomieniu kodu istnieją dwa sposoby:
1. Jeśli okno przewinęło się poza pasek nawigacji, ustalamy, że jest to stały CSS (to jest “lepki” część).
2. Jeśli górna część okna jest wyższa niż pierwotna pozycja paska nawigacji (tj. Użytkownik ponownie przewinął w górę), przywracamy domyślną pozycję statyczną.

Chciałbym zwrócić uwagę na dwa punkty:

• +288 jest tam, aby naprawić błąd związany z uzyskaniem niewłaściwej pozycji; bez tego pasek zbyt wcześnie uruchamia stan lepkości - usuń go, aby zobaczyć, co mam na myśli. Nie będzie to konieczne we wszystkich motywach i prawdopodobnie możesz znaleźć lepsze rozwiązanie.
• Aby rozwiązać problem zmiany szerokości paska nawigacyjnego, gdy przechodzi on w stan lepki, edytuj style.css, wiersz 550, aby przeczytać 1000px zamiast 100%

To wszystko, pasek nawigacyjny powinien być ładnie lepki.

Streszczenie:

Pełna wymiana header.php kod tego samouczka można znaleźć w tym pastebin; i wymiana style.css tutaj. Mam nadzieję, że podobał ci się ten mały samouczek; jeśli masz problemy, opublikuj komentarz w komentarzach, ale pamiętaj, aby publicznie udostępnić swoją witrynę, abym mógł ją zobaczyć. Jeśli jesteś tutaj nowy, koniecznie sprawdź wszystkie nasze inne artykuły na blogu i rozwoju sieci.