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
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


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

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



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


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


Бывалый
****

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


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

Код
#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
Сообщений: 1434
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 641 раз
Репутация:   139  


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Почему разнообразие на сайте вредит проекту?
24 Kiloan_Frost 1539 Сегодня, 0:48
автор: Kiloan_Frost
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОцените сайт "бизнес, новости, право". В чем проблема?
22 Merzuka 3151 Вчера, 12:15
автор: nikolay_web
Открытая тема (нет новых ответов) Алгоритм "Немезида" в ВК. МДК все?
3 MissContent 658 Вчера, 0:03
автор: Fartovyj
Открытая тема (нет новых ответов) Ссылки с "морды" и внутр. DA-60 PA-46 Бурж тематика Форекс, опционы, криптовалюта и связанное
Принимаю тематики bitcoin, forex, money и сопутствующее
0 Shaltick 368 22.5.2018, 19:34
автор: Shaltick
Открытая тема (нет новых ответов) В России могут создать "белый VPN" для добросовестных ресурсов
2 seostock 874 21.5.2018, 15:01
автор: wertu


 



RSS Текстовая версия Сейчас: 24.5.2018, 20:43
Дизайн