X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Плавающий "подвал" на сайте
Pacifik
Pacifik
Topic Starter сообщение 24.7.2015, 14:12; Ответить: Pacifik
Сообщение #1


Участник
***

Группа: User
Сообщений: 106
Регистрация: 24.12.2009
Из: материалов следствия...
Поблагодарили: 75 раз
Репутация:   6  


Здравствуйте коллеги.
Есть необходимость сделать плавающую полоску в низу экрана, высотой примерно 50px и шириной 100%, тёмного цвета с лёгкой прозрачностью, в которой будет написан мой телефон, адрес и email, но что бы эта полоска изчезала, когда человек "докручивает" страницу до id="footer".
Подскажите, как реализовать это. У меня WordPress

Сообщение отредактировал Pacifik - 24.7.2015, 14:12


--------------------
Читайте книжки, больше читайте книжки на самом деле...
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dexplon
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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
topsmiling
topsmiling
сообщение 24.7.2015, 16:27; Ответить: topsmiling
Сообщение #3


ёёёёёёёёё ӭ
******

Группа: Active User
Сообщений: 1298
Регистрация: 6.3.2011
Из: ★звёзд★
Поблагодарили: 359 раз
Репутация:   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


--------------------
.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 24.7.2015, 18:31; Ответить: x64
Сообщение #4


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3432
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2750 раз
Репутация:   289  


Цитата(dexplon @ 24.7.2015, 15:21) *
если делать прозрачность через стили, то и надписи буду полупрозрачные не только фон

Смотря как делать (:
Код
background-color:rgba(255,255,255,.1)



--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 24.7.2015, 20:29; Ответить: Gerga
Сообщение #5


Участник
***

Группа: User
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


самый классный вариант))

Код
#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


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP


Поблагодарили: (4)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 24.7.2015, 21:37; Ответить: andreykashops
Сообщение #6


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


Gerga, только может быть некрасиво, когда часть плавающего будет видна, поэтому лучше на JS )


--------------------


Поблагодарили: (3)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SimplePay: Прием платежей на сайте для юридических и физических лиц
4 kuprum 535 15.12.2017, 14:07
автор: kuprum
Горячая тема (нет новых ответов) Рекомендую: размещение статьи на сайте, ТИЦ 325, PR 6, траст XT 8
44 rumblade 10697 14.12.2017, 15:45
автор: rumblade
Открытая тема (нет новых ответов) 17 вещей на вашем сайте, которые ненавидят
Один из постулатов маркетинга — не раздражать людей
25 PostBrigada 3632 12.12.2017, 21:44
автор: alexandrrr
Открытая тема (нет новых ответов) Новости mail.ru появятся в "рекомендациях" Вконтакте?
19 eduarddis 2806 12.12.2017, 20:37
автор: galikfor
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПрибыль с видео на сайте и в соц сетях
Как получить доп доход с нативного контента
14 maxim_krasovskiy 2838 12.12.2017, 12:05
автор: maxim_krasovskiy


 



RSS Текстовая версия Сейчас: 17.12.2017, 23:46
Дизайн