Как да създадете CSS-само Sticky Footer
Обикновено се нуждаем от JavaScript изпълнява ефекти на превъртане свързани с различни действия на потребителите на уеб страници. Сценарият върши работата проследяване доколко превъртане нагоре или надолу отнема страница, и задейства действие когато се достигне праг на височина.
Не е особено лошо да използвате JavaScript за превъртане на ефекти. Всъщност има по-сложни случаи невъзможно е да се реши без JavaScript. Въпреки това има CSS хакове които понякога могат да заменят тези скриптове.
Тази публикация ще ви покажеw, за да създадете футер разкрива ефекти на страница превъртате с помощта на CSS. Ще използваме два случая за използване, за да покажем това: едно за цялата страница (виж демонстрация) и едно за отделните елементи на страницата, като например статии.
Пълна страница
Ние трябва да създадем фундамент се показва отдолу на страницата докато потребителят превърта надолу. Също така, когато те превъртат страницата обратно нагоре, долната част трябва да бъдете скрити отново под страницата.
За да постигнем тази цел, първо трябва да създадем a долен колонтитул с фиксирана позиция в долната част на екрана.
1. Създайте фиксиран колонтитул
Нека да добавете малко съдържание и долен колонтитул първо на страницата. Използвам HTML таговете В моята демонстрация има изображение на прилеп в долния колонтитул за не толкова призрачен ефект, но можете да изберете всяко друго изображение, което ви харесва. Lorem ipsum dolor sit amet ... Преминаване към CSS, премахнете всяко пространство около Дайте някои измерения ( Приложете Оцветете и двете Нагласи По този начин ще има достатъчно място в долната част на долния колонтитул да бъдат видими когато потребителят превърта надолу по страницата. Това е. Ефектът за разкриване на долния колонтитул за пълната уеб страница е направен. Вижте демото Codepen по-долу. Тази техника може да се използва за отделен HTML елемент (с колонтитул), който е достатъчно дълго за правилен ефект на превъртане на страницата. Методът е малко хакерски, тъй като понастоящем не работи в Chrome и IE, но има приличен резерв. Първо, нека създадем дълга статия с долен колонтитул. За да популяризирам семантичен код, аз избрах Lorem ipsum dolor sit amet ... По-долу можете да видите основен стил на статията и долния колонтитул. Моята статия в момента изглежда така. Разбира се, можете да използвате и други основни стилови правила. Предишният колонтитул беше фиксиран, този ще бъде бъдете лепкави. Приложете Най- Можете да регулирате стойността му по ваш вкус, тъй като определя точката, в която долният колонтитул започва да се появява или изчезва, докато потребителят превърта надолу или нагоре. Дай същата стойност за долния край на статията, така че на дъното ще има достатъчно място, за да се разкрие пълния колонтитул. Сега имаме нужда отвор в долната част на статията чрез които можем да видим лепкава долна част, която се превърта надолу и нагоре. За да постигнете това, заменете Най- И накрая, нека поставете долния колонтитул зад статията използвайки И това е, индивидуалният елемент на страницата с ефекта на превъртане е направен. Вижте по-долу писалката Codepen. Можете да намерите и двата случая на използване на нашата страница на Github. и за семантика. въпреки това,
Продължете да превъртате, докато видите долния колонтитул
маркер от настройка на полетата до 0, и го направете достатъчно дълго добавяне на персонализирана височина за да предизвикате превъртане (ако съдържанието на тялото на страницата ви е достатъчно дълго, за да предизвика превъртане, не е необходимо да го предавате на височина).широчина и височина) до долния колонтитул и фиксира позицията си в долната част на екрана с позиция: фиксирана; и дъното: 0; Имоти. body семейство на шрифтове: Crimson Text; размер на шрифта: 13pt; марж: 0; footer ширина: 100%; височина: 200px; позиция: фиксирана; дъното: 0; фонов цвят: # DD5632;
2. Скрийте долния колонтитул
Z-индекс: -1 правилото до долния колонтитул, за да поставете я зад всички други елементи на страницата. и бели, за да покрийте долния колонтитул. body, html фонов цвят: #fff; footer ширина: 100%; височина: 200px; позиция: фиксирана; дъното: 0; фонов цвят: # DD5632; z-индекс: -1;
3. Регулирайте долната граница
марж дъно от свободен край равна на височината на долния колонтитул (в моя пример 200px). тяло височина: 1000px; марж: 0; margin-bottom: 200px;
Елементи на отделните страници
1. Създайте дълъг член
и .
Член 1
артикул ширина: 500px; фон-цвят: # FEF9F3; пълнеж: 20px 40px; article> footer височина: 100px; фонов цвят: # FE0178; body семейство на шрифта: корморан гамоманд;
2. Направете Footer Sticky
позиция: лепкава правилото на долния колонтитул, така че ще се движи в рамките на статията, но все пак поддържа позицията си на екрана, докато потребителят превърта нагоре и надолу. article> footer височина: 100px; фонов цвят: # FE0178; позиция: -Вебкит-лепкава; позиция: лепкава; дъно: 80 пиксела;
отдолу: 80px правило фиксира позицията на долния колонтитул 80px над дъното на статията. артикул ширина: 500px; фон-цвят: # FEF9F3; пълнеж: 20px 40px; margin-bottom: 80px;
3. Добавете частично прозрачен фон
Цвят на фона на статията с линеен градиент фон изображение, което от горната част на статията до горната част на долния колонтитул е оцветени с цвета на фона на изделието, а останалата част на дъното е направени прозрачни. артикул ширина: 500px; пълнеж: 20px 40px; background-image: линеен градиент (до дъното, # FEF9F3 calc (100% - 120px), прозрачен 0); margin-bottom: 80px;
изчислено (100% -120px) CSS функцията изчислява пълната височина на статията минус долния колонтитул. В моя пример това е 120px (100px за височина + 20px за запълване).
4. Поставете долния колонтитул
z-индекс: -1 CSS правило. article> footer височина: 100px; фонов цвят: # FE0178; позиция: -Вебкит-лепкава; позиция: лепкава; дъно: 80 пиксела; z-индекс: -1;
