Помощник
 |
|
|
|
|
Сообщение сайта
|
 Плавающий "подвал" на сайте |
Pacifik
|
Сообщение
#1
|
||
 Участник  Группа: User Сообщений: 106 Регистрация: 24.12.2009 Из: материалов следствия... Поблагодарили: 75 раз Репутация:  6 
 |
|
||
 |
|
||
|
dexplon
|
 24.7.2015, 16:21;
Ответить: dexplon
Сообщение
#2
|
|
Бывалый Группа: User Сообщений: 410 Регистрация: 3.1.2013 Поблагодарили: 149 раз Репутация: 26
|
Велосипед:
1) Чтобы блок "Прилип" к низу экрана, прописать ему стили:"position:fixed;bottom:0px". Для ширины и высоты: "width:100%;height:50px". Полупрозрачность - лучше делать через полупрозрачный пиксель в бэкграунде блока, если делать прозрачность через стили, то и надписи буду полупрозрачные не только фон. 2) Про исчезновение и прокрутку. Используете событие scroll от jquery , вешая его на окно Ссылка на описание. В данном обработчике высчитываете расстояние до верха экрана у Футера и вашего блока с помощью getBoundingClientRect() Ссылка на описание . Затем если расстояние у футера до начала страницы выходит меньше чем у блока - скрываем блок через style "display:none", если больше то ставим "display:block" 2.1) Про исчезновение и прокрутку вариант 2 (Наверное этот велосипед более правильный). Высчитывает высоту экрана Ссылка на описание , потом так же как в п.2 в событии скрола высчитываем расстояние от футера до начала экрана через getBoundingClientRect(). Если это расстояние меньше чем высота экрана, то скрываем полупрозрачный блок "display:none", если больше, то "display:block". П.С. Разницу в расстояниях возможно нужно будет подогнать с учетом высоты полупрозрачного блока. Сообщение отредактировал dexplon - 24.7.2015, 16:21 |
|
|
|
|
topsmiling
|
24.7.2015, 16:27;
Ответить: topsmiling
Сообщение
#3
|
 ёёёёёёёёё ӭ Группа: Active User Сообщений: 1298 Регистрация: 6.3.2011 Из: ★звёзд★ Поблагодарили: 361 раз Репутация: 97
|
html:
Код <div class="block">Телефон: 6256262625 Мыло: хозяйственное </div> css: Код .block { display: block; width: 100%; height: 50px; position: fixed; left: 0px; bottom: 0px; z-index: 1; } А вот чтоб исчезало надо JS функцию прописать, в коей я не настолько силён чтоб сразу выдать) Что то типа: Код <script> $(function(){ var topPos = $('.menublock').offset().top; $(window).scroll(function() { var top = $(document).scrollTop(), pip = $('#footer').offset().top, height = $('.menublock').outerHeight(); if (top > 1 && top < pip - height) {$('.menublock').addClass('blocknone').removeAttr("style");} else if (top > pip - height) {$('.menublock').removeClass('blocknone').css({'bottom':'0'});} else {$('.menublock').removeClass('fixed');} }); }); </script> где menublock первоначальный класс, а blocknone который должен появиться при выходе "#footer" на экран. Сообщение отредактировал topsmiling - 24.7.2015, 16:29 -------------------- |
|
|
|
|
x64
|
24.7.2015, 18:31;
Ответить: x64
Сообщение
#4
|
 F.A.L.L.O.U.T. Группа: Active User Сообщений: 4055 Регистрация: 30.6.2011 Из: Железнодорожный (Балашиха) Поблагодарили: 3409 раз Репутация: 331
|
Цитата(dexplon @ 24.7.2015, 15:21)  если делать прозрачность через стили, то и надписи буду полупрозрачные не только фон Смотря как делать (: Код background-color:rgba(255,255,255,.1) |
|
|
|
|
Gerga
|
24.7.2015, 20:29;
Ответить: Gerga
Сообщение
#5
|
 Бывалый Группа: User Сообщений: 308 Регистрация: 15.2.2013 Из: Одесса Поблагодарили: 203 раза Репутация: 52
|
самый классный вариант))
Код #floating_block{ position: fixed; right: 0;bottom: 0;left: 0; height:50px color: #fff; background: rgba(0,0,0,0.8); z-index: 98; } #floating_block:hover { background: rgba(0,0,0,0.9); } #footer { position: relative; z-index: 99; } Наш плавающий блок (это #floating_block) будет заходить под подвал Сообщение отредактировал Gerga - 24.7.2015, 20:39 |
|
|
|
|
andreykashops
|
24.7.2015, 21:37;
Ответить: andreykashops
Сообщение
#6
|
|
 WordPress is my Life.. Группа: Active User Сообщений: 1438 Регистрация: 21.7.2012 Из: Украины Поблагодарили: 650 раз Репутация: 139
|
Gerga, только может быть некрасиво, когда часть плавающего будет видна, поэтому лучше на JS )
-------------------- |
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Странный трафик на сайте длительное время | 34 | TABAK | 9061 | Вчера, 23:38 автор: Arsenwenger |
|
CryptoCloud — прием USDT, BTC, ETH, LTC на любом сайте | 37 | CryptoCLoud | 10811 | Вчера, 15:37 автор: CryptoCLoud |
 |
Боты могут делать пушподписки на моём сайте? | 3 | Megaspryt | 950 | Вчера, 5:18 автор: Skyworker |
|
 Быстрый и качественный обмен на сайте Baksman.orgОбмен Bitcoin, BTC-e, PM, Qiwi, Yandex money, Карты банк |
53 | Baksman | 33815 | 23.4.2024, 11:29 автор: Baksman |
|
Хостинг "Hostland" - качественный хостинг по разумным ценам и со своей Панелью Управления | 0 | artmeteor | 561 | 18.4.2024, 22:46 автор: artmeteor |
|
Текстовая версия | Сейчас: 25.4.2024, 3:19 |
