Како створити ЦСС-само Стицки подножје
Обично нам је потребан ЈаваСцрипт изводите ефекте померања се односе на различите акције корисника на веб страницама. Скрипта ради посао праћење кретања странице према горе или доле, и активира акцију када се достигне висина прага.
Није посебно лоше користити ЈаваСцрипт за помицање ефеката. Заправо постоје сложенији случајеви немогуће решити без ЈаваСцрипт-а. Међутим, постоје ЦСС хацкс које понекад могу заменити ове скрипте.
Овај пост ће вам показати хов за креирање подножја открива ефекте на страници померањем помоћу ЦСС-а. Користићемо два случаја употребе да бисмо показали ово: један за целу страницу (види демо) и један за појединачне елементе странице, као што су чланци.
Цела страна
Морамо да направимо подножје појављује се испод странице док се корисник помера надоле. Такође, када померају страницу назад, подножје треба бе хидден поново испод странице.
Да бисмо постигли овај циљ, прво морамо да направимо подножје са фиксном позицијом на дну екрана.
1. Креирајте фиксни подножје
Омогућава додајте неки садржај и подножје прво на страницу. Користим ХТМЛ ознаке У мојој демо верзији, приказана је слика шишмиша у подножју за не-тако сабласни ефекат, али можете одабрати било коју другу слику. Лорем ипсум долор сит амет… Прелазак на ЦСС, уклоните било који простор око Дајте неке димензије ( Аппли тхе Обоје обоје Подесите На тај начин ће бити довољно простора на дну подножја бити видљив када се корисник помера по страници. То је то. Ефекат откривања подножја за целу веб страницу је завршен. Погледајте демо Цодепен испод. Ова техника се може користити за појединачни ХТМЛ елемент (са подножјем) који је довољно дуго за правилан ефекат померања странице. Метод је мало хакован, јер тренутно не ради у Цхроме-у и ИЕ-у, али има пристојну резервну. Прво, направимо дугачак чланак са подножјем. Да промовишем семантички код, изабрао сам Лорем ипсум долор сит амет… Испод можете видети басиц стилинг чланка и подножја. Мој чланак тренутно изгледа овако. Наравно, можете користити и друга основна правила. Претходни подножје је фиксирано, ово ће бити бити лепљив. Аппли тхе Тхе Можете подесити његову вредност по свом укусу, јер одређује тачку у којој се подножје почиње појављивати или нестајати док се корисник помера надоле или горе. Дај исту вредност за доњу маргину чланка, тако да има довољно простора на дну да се открије пуна подножје. Сада нам треба отварање следећег дна чланка кроз које можемо видети лепљиво подножје које се помера надоле. Да бисте то постигли, замените Тхе Коначно, хајде ставите подножје иза чланка помоћу И то је то, појединачни елемент странице са ефектом откривања на сцролл-у је завршен. Проверите Цодепен пен испод. Оба случаја коришћења можете наћи и на нашој Гитхуб страници. и за семантику. Међутим,
Настави да се помераш док не видиш подножје
таг би подешавање маргина на 0, и довољно дуго додавање прилагођене висине да подстакнете померање (ако је садржај тела на вашој страници довољно дугачак да изазове померање, не морате да му дате висину).видтх и хеигхт) до подножја, и поправити своју позицију на дно екрана са позиција: фиксна; и боттом: 0; својства. боди фонт-фамили: Цримсон Тект; фонт-сизе: 13пт; маргин: 0; фоотер видтх: 100%; хеигхт: 200пк; позиција: фиксна; боттом: 0; бацкгроунд-цолор: # ДД5632;
2. Сакријте подножје
з-индекс: -1 правило у подножју да би ставите је иза свих других елемената на страници. и тагови бела да би покријте подножје. боди, хтмл бацкгроунд-цолор: #ффф; фоотер видтх: 100%; хеигхт: 200пк; позиција: фиксна; боттом: 0; бацкгроунд-цолор: # ДД5632; з-индекс: -1;
3. Подесите доњу маргину
маргин-боттом од таг једнака висини подножја (у мом примеру 200пк). тело висина: 1000пк; маргин: 0; маргин-боттом: 200пк;
Елементи појединачних страница
1. Направите дугачак чланак
и .
члан 1
артикл ширина: 500пк; бацкгроунд-цолор: # ФЕФ9Ф3; паддинг: 20пк 40пк; артицле> фоотер висина: 100пк; бацкгроунд-цолор: # ФЕ0178; боди фонт-фамили: цорморант гарамонд;
2. Направите Фоотер Стицки
позиција: лепљива правило за подножје, тако да ће се кретати унутар граница чланка али ипак задржати своју позицију на екрану док се корисник помера горе-доле. чланак> фоотер хеигхт: 100пк; бацкгроунд-цолор: # ФЕ0178; позиција: -вебкит-стицки; позиција: лепљива; боттом: 80пк;
боттом: 80пк Правило исправља положај подножја 80пк изнад дна чланка. артикл ширина: 500пк; бацкгроунд-цолор: # ФЕФ9Ф3; паддинг: 20пк 40пк; маргин-боттом: 80пк;
3. Додајте делимично транспарентну позадину
боја позадине чланка са линеар градиент позадинска слика, који од врха чланка до врха подножја је обојене бојом позадине производа, а преостали део на дну транспарентан. артикл ширина: 500пк; паддинг: 20пк 40пк; бацкгроунд-имаге: линеарни градијент (до дна, # ФЕФ9Ф3 цалц (100% - 120пк), транспарентан 0); маргин-боттом: 80пк;
цалц (100% -120пк) ЦСС функција израчунава пуна висина чланка минус подножје. У мом примеру је 120пк (100пк за висину) + 20пк за паддинг).
4. Поставите позадину подножја
з-индекс: -1 ЦСС правило. чланак> фоотер хеигхт: 100пк; бацкгроунд-цолор: # ФЕ0178; позиција: -вебкит-стицки; позиција: лепљива; боттом: 80пк; з-индекс: -1;
