Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Waypoints.js

Стварэнне навігацыі загаловак Sticky Выкарыстанне JQuery Waypoints

by
Length:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

У гэтым уроку мы будзем ствараць навігацыйную панэль, якая застаецца з вамі, як вы пракруціць ўніз - і мы таксама будзем кідаць трук або два ў сумесі адшліфаваць яго.

перавыдаць Вучэбны дапаможнік

Кожныя некалькі тыдняў, мы пераглядаем некаторыя з любімых пастоў нашага чытача з усёй гісторыяй сайта. Гэты падручнік быў упершыню апублікаваны ў сакавіку 2012 года.


ўвядзенне

«Усе любяць стужачкі», кажа Крыс Coyier пры абмеркаванні добрых якасцяў :before і :after псеўда-элементаў. Я бачыў гэтыя стылізаваныя, трохкутнік беражкамі стужкі выскокваюць праз Інтэрнэт (адзін з яркіх прыкладаў таго Уводзячы Timeline старонкі Facebook), і, у той час як яны маюць пэўную прывабнасць, я павінен прызнаць, што прасторавы эфект, які яны ствараюць проста Абыякава » т глядзець прама на мяне.

Нашыўкі спадабаліся па прычыне, хоць - яны парушаюць ў асноўным плоскую парадыгму дызайну, які мы традыцыйна звязаны з, і яны адзін з нешматлікіх візуальных элементаў, каб зрабіць гэта ў непрыкметным чынам. Але, як векавая гаворыцца, там павінна быць больш, чым адзін спосаб скуры кошкі - так, у гэтым падручніку, я прапаную альтэрнатыўны візуальны стыль для такіх элементаў, якія я знаходжу значна больш натуральны выгляд і эстэтычна прыемны. Я спадзяюся, што вам падабаецца і добра выкарыстоўваць яго!

Што мы будзем рабіць

У гэтым уроку мы будзем выкарыстоўваць адзін з новых элементаў HTML5, тым nav тэг, у якасці кантэйнера для гарызантальнага спісу спасылак. Я сцісла растлумачу, як зрабіць гэта выглядаць даволі выкарыстоўваючы трохі CSS.

Самае галоўнае, што вы будзеце рабіць самі знаёмыя з асновамі Кропак убудова JQuery, які забяспечыць пашыраныя функцыянальныя магчымасці: як карыстальнік пракручвае ўніз, панэль навігацыі будзе прыліпаць да верхняй частцы акна прагляду, а таксама змены, каб паказаць бягучы раздзел , Як трохі дададзенага кантакту, мы будзем выкарыстоўваць іншы убудова, ScrollTo для таго, каб забяспечыць плыўны скролінг і зручнае размяшчэнне, калі карыстальнік націскае на навігацыйныя спасылкі.


Крок 1: The Box

Я ўпэўнены, што вы ўжо знаёмыя з рознымі новымі элементамі, якія былі ўведзеныя з HTML5. У гэтым прыкладзе мы будзем выкарыстоўваць два з іх: <nav> і <section>. Мы збіраемся пачаць з наступным:

Мы будзем мець, каб даць нашай навігацыйнай панэлі відавочную шырыню. Зрабіць гэта 28px шырэй, чым абгорткі, і падштурхоўваць яго на месца з адмоўным левым краем. Давайце таксама надаць яму злёгку закругленыя верхнія краю, выкарыстоўваючы border-*-radius, а таксама некаторыя адвольныя водступы.

Далей мы збіраемся дадаць неўпарадкаваных спіс спасылак ўнутры панэлі навігацыі, і ўсталяваць яго элементы для display: inline-block для таго, каб змясціць іх усё ў адным радку. Нам не патрэбныя ніякія кулі, таму мы не будзем кідаць list-style: none ў міксе.

Да гэтага часу, вы павінны мець нешта накшталт гэтага:


Крок 2: Грані

Цяпер, калі толькі CSS дазволіў нам мець некалькі псеўда-элементы (гэта значыць ::after::after), мы маглі б лёгка скончыць закругленыя краю панэлі навігацыі ў семантычны чыстым спосабе. Але мы не можам зрабіць гэта, так што мы павінны дадаць два несемантических div ў канцы nav. Дайце ім класы nav-left і nav-right (ці вы маглі б назваць іх нешта вобразнае, як Кастор і Поллукс). Яны 14px у шырыню 14px вышынёй, і пазіцыянуюцца absolute 14px ад ніжняга канца nav.

Як паказана вышэй, border-radius сямейства уласцівасцяў можа прымаць два значэння для кожнага кута. Тыя таксама можа быць працэнты шырыні элемента, што вельмі зручна - такі падыход дазваляе радыус мяжы аўтаматычна адаптавацца да зменаў памераў бокса.

Маленькая «цень», якія завяршаюць знешні выгляд стужкі навігацыйнай панэлі з'яўляюцца створанымі з дапамогай ::after псеўда-элементаў. Іх шырыня і вышыня, а таксама іх межы радыусу, таксама устанаўліваецца з выкарыстаннем працэнты.

І мы зрабілі тут!

Пазбавіўшыся ад большай часткі немагчымай геаметрыі Роўныя стужкі, давайце працягваць.


Крок 3: Сцэнар

Для дасягнення эфекту плавае загалоўка, мы будзем выкарыстоўваць убудова JQuery пад назвай Waypoints, Калеб Тротон. Яго адзіная мэта складаецца ў тым, каб выклікаць падзеі, калі карыстальнік пракручвае да некаторага элементу. Як вы бачыце, гэта вельмі проста, але прапануе вялікую гнуткасць - вы можаце зірнуць на некалькі прыкладаў на сваёй хатняй старонцы.

Уключыце JQuery і Кропак у вашу старонку, і давайце пачнем!

Першы думаю, што вам трэба зрабіць, гэта зарэгістраваць кропку маршруту з дапамогай выкліку метаду .waypoint() на элеменце. Вядома, гэта не робіць нічога сам па сабе - вы павінны вызначыць функцыю апрацоўшчыка да падзеі. Самы просты спосаб зрабіць гэта, перадаўшы гэтую функцыю ў якасці параметру .waypoint().

Паспрабуйце: дадайце наступны радок у ваш сцэнар і ўбачыць ўсплывальнае паведамленне пры прагортцы міма панэлі навігацыі.

Зараз для таго, каб дасягнуць нашага жаданага эфекту, то абавязкова атрымаеце крыху больш складана. Па-першае, мы павінны ўкласці нашу навігацыйную панэль ў кантэйнеры, які будзе нашай фактычнай шляхавы пункту, і служаць у якасці зручнага запаўняльнікам (падрабязней пра гэта ніжэй).

У вашым CSS, стварыце наступнае правіла CSS. (У той час як вы на яго, перамяшчаць любыя вертыкальныя поля nav можа мець у nav-container)

І мы гатовыя да добрага боку! Змена змесціва вашага скрыпту на наступнае:

Добра, дзе, чорт вазьмі, усё гэта ўзялося, вы з поўным правам спытаць. Ну, вы, напэўна, зразумелі, што мы прымацаванне Кропкі ў nav-container; Толькі на гэты раз, мы робім гэта па-рознаму. Замест таго, каб непасрэдна перадаючы функцыю апрацоўшчыка для .waypoint (), мы інкапсуляцыі яго ў аб'ект. Сам па сабе, гэта не мае ніякага значэння: як цалкам дапушчальныя спосабы зрабіць тое ж самае Што мы праходзім, хоць аб'ект, можа ўтрымліваць некалькі іншых значэнняў параметраў - таму яго выкарыстанне ў цяперашні час робіць для больш паслядоўнага кода ў далейшым.

Функцыя апрацоўшчык, які мы вызначылі прымае два параметру: першы адзін стандартны аб'ект event JQuery, які мала цікавіць тут. Другі з'яўляецца Waypoints канкрэтным: гэта радок, значэнне якога альбо 'down' або 'up' у залежнасці ад таго, якім чынам карыстальнік быў пракруткай, калі яны дасягнулі кропкі.

Цяпер, ведаючы, якім чынам карыстальнік будзе вельмі важны біт інфармацыі, каб мець, проста таму, што дазваляе выконваць розныя паводзіны ў любым кірунку. У целе функцыі апрацоўшчыка, мы выкарыстоўваем параўнальна невялікі вядомы варыянт метаду JQuery ў .toggleClass(), што робіць за карысныя скарочаны: у гэтым сінтаксісе, другі параметр вызначае, ці будзе дададзены клас да мэтавага элементу або выдалены з яго. Калі карыстальнік пракручвае ўніз, кірунак direction===’down’ true, таму наша панэль навігацыі атрымлівае sticky клас, і прыліпае да верхняй частцы акна прагляду. Як толькі карыстач пракручвае зваротна зноў, клас выдаляецца з панэлі навігацыі, якая вяртаецца на сваё месца. Паспрабуйце прама цяпер.

Крута, так? Тым не менш, калі вы павольна пракруціць ўніз міма шляхавы пункту, якую вы толькі што стварылі, вы, верагодна, заўважылі, што, як вы перадаеце яго ўтрыманне «скача» уверх трохі з-за навігацыйную панэль атрымліваць выдаляюцца з патоку кантэнту. Акрамя таго, выглядае вельмі неахайна, такія паводзіны могуць магчыма невыразная частка вашага кантэнту і пагаршаць зручнасць выкарыстання. На шчасце, усё гэта займае простае выпраўленне - даданне наступнага кода ў функцыю апрацоўшчыка робіць скачок сысці.

Што адбываецца тут досыць відавочная: мы выкарыстоўваем nav-container ў якасці запаўняльніка, як згадвалася вышэй. Калі мы пракрутка ўніз, мы пашыраем сваю вышыню, а ўтрыманне ніжэй застаецца на месцы. Там падвох, хоць - для гэтай працы, як гэта, любыя вертыкальныя поля, якія вы можаце мець вакол навігацыйнай панэлі павінны быць ужытыя да Nav-container, а не nav.

Так што гэта такое! Мы атрымалі сябе добры фіксаванай навігацыйнай панэлі, гэтак жа, як і многія іншыя сайты ўжо робяць. Шоў скончана, людзі ...

... ці гэта? Ну, ёсць яшчэ трук або два вы можаце ўбачыць, і якія маглі б проста паставіць вас наперадзе зграі. Калі гэта так, то чытайце далей.


Крок 4: Вертыкальныя Зрушэння

Калі вы думаеце пра гэта, ёсць шмат выпадкаў, калі запуск падзеі, калі элемент дасягае сам край браўзэра краявіднага не тое, што вы хочаце зрабіць. На шчасце, Waypoints прадастаўляе зручную магчымасць для гэтага: offset. Вось як гэта выглядае:

offset дазваляе стварыць фактычную Шляхавы кропку на пераменным адлегласці ад верхняй часткі элемента. Станоўчае значэнне выклікае кропку, калі вяршыня элемента знаходзіцца на зададзеным адлегласці ніжэй верхняй частцы акна прагляду, а адмоўнае значэнне выклікае Кропку, калі элемент, што значна вышэй у верхняй частцы акна прагляду (г.зн. карыстальнік добра пракручваецца міма яго ).

Значэнне зрушэння можа быць лік (якія ўяўляюць сабой фіксаванае колькасць пікселяў), радок, якая змяшчае працэнт (інтэрпрэтуюцца як працэнт ад вышыні акна прагляду), або функцыі, якая вяртае колькасць пікселяў. Апошнія з іх могуць забяспечыць нейкую сур'ёзную гнуткасць, і мы збіраемся зрабіць некаторыя выкарыстоўваць яго ў далейшым. У цяперашні час, давайце прытрымлівацца фіксаваных значэнняў і ўбачыць, што яны добрыя для.

Першае, што прыходзіць на розум дадаюць некаторы прастору над ліпкім элементам. Выкарыстанне пераменнага offset, гэта лёгка: для 15-пікселя зрушэння ад верхняй часткі, дадаць offset: 15px да .waypoint() і змяніць top: 0px top: 15px ў .sticky правілаў CSS.

Калі ваш дызайн патрабуе гэтага, невялікі градыент вышэй панэлі навігацыі можа быць таксама прыемна датыкацца. Гэта лёгка дасягаецца шляхам дадання яшчэ аднаго DIV ўнутры nav, і пісаць трохі CSS:

Гэта даволі тонкія трохі вочы цукеркі будзе працаваць добра ў мінімалістычны дызайне.


Крок 5: Зрушэнне функцыі

Адна рэч, якую Калеб задуменна ўключаны ў Кропак з'яўляецца магчымасць генерыраваць шляхавы зрушэння дынамічна, напрыклад, так:

Гэта дазваляе нам мець апрацоўшчык, які будзе ініцыяваць, калі карыстач ужо пракручваецца 50px міма ніжняй частцы элемента, без неабходнасці ведаць яго вышыню загадзя.

Заўвага: Такія працэдурна генерыруюцца зрушэння (а таксама тыя, якія дадзены ў працэнтах), пералічваецца кожны раз пры змене памеру акна, новыя кропкі будуць дададзеныя або параметры шляхавы пункту змяняюцца. Калі вы робіце нешта іншае, што можа паўплываць на пазіцыі маршрутных кропак (напрыклад, змена DOM або макет старонкі), не забудзьцеся выклікаць $.waypoints ('refresh') потым на пазіцыі, якія будуць пералічаныя.

У кантэксце нашага ўрока, адзін выкарыстоўваць для гэтай функцыі плаўна слізгальная панэль навігацыі зверху. Будзьце гатовыя - наступны самы вялікі кавалак кода, да гэтага часу. Там не павінна быць нічога, што вы яшчэ не знаёмыя, хоць, так што тут ідзе:

Ня кволыя! Гэта ўсё даволі стандартны JQuery тарыф: як толькі мы дадаць ці выдаліць sticky клас nav, переопределеит вертыкальнае становішча элемента з дапамогай .css(), а затым .animate() гэта тое, што павінна быць. .Stop() служыць для прадухілення магчымых памылак ачысціўшы чарзе падзей JQuery ст.

Там крыху пабочны эфект гэтага, хоць - паколькі код фактычна бярэ на сябе вертыкальнае становішча навігацыйнага элемента пры фіксаваным, вы можаце таксама адмовіцца ад top: 15px ад вашага CSS. Калі вы з'яўляецеся часткай вялікага праекта, з асобнымі людзьмі, якія працуюць па праектаванні і франтальных сцэнарах, гэта можа ўяўляць сабой праблему, так як гэта лёгка страціць такія пісака. Проста, каб вы ведаеце, існуюць убудовы - такія як выдатнае jQuery.Rule Арыэля Flesler, які можа быць выкарыстаны для пераадолення разрыву паміж сцэнарамі і табліцамі стыляў. Вы павінны вырашыць для сябе, ці трэба вам што-небудзь падобнае.

Вы, безумоўна, можаце дасягнуць аналагічнага эфекту з CSS @keyframes замест гэтага, але ёсць нашмат менш падтрымкі для іх (і шмат прэфіксаў), яны менш гнуткімі, і «ўверх» анімацыя будзе вялікім не-не. Бо мы не пакідаючы след прагрэсіўнага паляпшэння, няма ніякіх прычын, каб не прытрымлівацца надзейнай функцыянальнасці Jquery ст.


Крок 6: Вылучэнне і Smooth Scrolling

Вы маглі б знайсці сабе неабходнасць змяніць які элемент будзе вылучаны як чытач прагрэсуе ў мінулым розных раздзелы старонкі. З Пунктамі, гэта даволі лёгка дасягнуць. Вам трэба дадаць наступнае ў ваш скрыпт:

На гэты раз мы выкарыстоўваем зрушэнне, выяўленае ў адсотках ад вышыні акна. Фактычна, гэта азначае, што ўяўная лінія, якая кажа наш сцэнары якога падзел у цяперашні час праглядалася змяшчаецца каля траціны ад верхняй частцы акна прагляду - проста аб тым, дзе глядач будзе глядзець на пры чытанні доўгага тэксту. Больш надзейнае рашэнне можа выкарыстоўваць функцыю, каб адаптавацца да зменаў у вышыні навігацыйнага бара.

Код, які мы будзем выкарыстоўваць у нашай функцыі апрацоўшчыка крыху менш тлумачэнняў, хоць. Вось яна:

Па-першае, мы павінны ведаць, які з падзелаў у цяперашні час разглядаецца. Калі мы пракрутка ўніз, то секцыя, што шляхавыя належыць таго ж адзін, які становіцца актыўным. Пракрутка ўверх міма кропкі маршруту, аднак, азначае, што папярэдні раздзел, які прыводзіцца ў поле зроку - таму мы выкарыстоўваем .prev (), каб вылучыць яго. Затым мы выдаліць selected клас з усіх спасылак у панэлі навігацыі, перад паўторным нанясеннем яго на той, чый атрыбут HREF адпавядае id бягучага актыўнага падзелу.

Гэта працуе вельмі добра; калі вы хочаце выйсці за рамкі дадання і выдалення класаў, вы можаце захацець зірнуць на убудова, такія як LavaLamp.

У нейкі момант, вы, магчыма, заўважылі, што пры націску на спасылкі ў навігацыйнай панэлі размяшчае ў верхняй частцы секцыі на самым версе браўзэра прагляду. Гэта супярэчыць здароваму сэнсу дастаткова, калі няма нічога зацямняючы, што частка экрана; Цяпер, калі мы атрымалі навігацыйную панэль там, ён становіцца велізарным раздражненнем. Гэта дзе ScrollTo Арыэля Flesler прыходзіць на дапамогу. Уключыце яго ў старонцы, а затым дадайце наступны код:

(Вядома, што код будзе вышэй апошняй фігурнай дужкі!)

Хоць ёсць лепшыя спосабы звязаць функцыю клікаць падзеі, мы будзем прытрымлівацца самага простага: .click (). Метад .scrollTo () выклікаецца такім чынам, што вельмі падобны на .waypoint (). Яна прымае два параметру - мэта пракруткі і аб'ект, які змяшчае розныя варыянты, якія, у дадзеным выпадку, з'яўляюцца даволі відавочныя. HREF атрыбут, па якіх пстрыкнулі Лінк выдатна працуе ў якасці мэты пракруткі, і выраз, якое выкарыстоўваецца ў якасці верхняга зрушэння месцамі мэтаў на 15% вышыню акна прагляду.


выснову

І, здаецца, што мы зрабілі. Я ўвёў вас у зручны невялікі убудова, які Waypoints, і мы прайшлі праз некалькі выпадкаў выкарыстання, якія павінны даць вам ўяўленне аб розных рэчах, якія вы маглі б дасягнуць з ім. Акрамя таго, мы рэалізавалі значна больш інтуітыўнае паводзіны пракруткі, каб пайсці з нашай навігацыяй. Кіньце некаторы Ajax ў сумесь, і вы на шляху да будаўніцтва свайго роду бясшвоўнага, захапляльнага вэб вопыту, які з'яўляецца збіраецца быць будучыняй Інтэрнэт ... ну, хутчэй за ўсё, гэта будзе модна на працягу кароткага часу, а затым стаць звычайная з'ява, што робіць ветэран Web настальгіі, як рэчы мелі звычай быць. Але эй, гэта, як ідуць справы.

Што тычыцца стужак, іх вялікі недахоп заключаецца ў наступным: яны проста ілюзія. Борта стужкі на самай справе не ісці па краях кантэйнера; яны з'яўляюцца толькі такім чынам, што становіцца досыць відавочным, як стужка праходзіць над элементам, які тырчыць ад краю старонкі.

З-за таго, як працуе Z-індэкс, здаецца, няма простага спосабу вырашэння гэтага канфлікту, за выключэнне яго пазбегнуць у першай чаргі. Тым не менш, з уяўленнем, а таксама базавымі ведамі JQuery, вы можаце сканструяваць шлях для гэтых элементаў, каб выйсці з шляху стужачкі, як яна набліжаецца да іх. Робячы гэта выходзіць за рамкі дадзенага кіраўніцтва, хоць; будзем спадзявацца, што я змагу паказаць яго вам рана ці позна ў выглядзе хуткага наканечніка, альбо тут, альбо на Nettuts +. Сачыце за абнаўленнямі!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.