Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.06.2016, 00:13
Новичок на форуме
Отправить личное сообщение для yafet Посмотреть профиль Найти все сообщения от yafet
 
Регистрация: 25.06.2016
Сообщений: 5

Прилипающий (скользящий) блок снизу экрана — как прописать условие?
Здравствуйте!

Я занимаюсь версткой, но пока очень поверхностно знаком с js. Пробовал гуглить задачу, пытался методом «тыка» исправить готовые скрипты, но ничего путного не вышло.

Хочу сделать прилипающий блок, но не сверху экрана, как часто можно видеть на сайтах, а снизу.

Аналог можно посмотреть на tjournal.ru — нижний правый блок («О проекте», «Реклама» и т.п.). Пользователь скроллит до блока, а блок цепляется к нижней границе окна. И отцепляется, соответственно.

Сейчас использую скрипт, который цепляет блок к верхней границе, вот листинг:

<script>
$(function() {
	var fixblock_height = $('#fixblock').height();
	var fixblock_pos = $('#fixblock').position().top; ;
	$(window).scroll(function(){

	   if ($(window).scrollTop() > fixblock_pos){ 
			$('#fixblock').css({'position': 'fixed', 'top':'0px', 'z-index':'10'}); 
	   }else{
			$('#fixblock').css({'position': 'static'}); 
			$('#headblock').css('padding-bottom', '0px');
	   }
	})
});   
</script>


<div id="fixblock">Содержимое скользящего блока</div>


Буду благодарен за помощь в корректировке условия.
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2016, 00:21
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

Так задай блоку местоположение через стили и он будет внизу.
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2016, 00:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от yafet
Хочу сделать прилипающий блок, но не сверху экрана, как часто можно видеть на сайтах, а снизу.
а зачем скрипт? в примере блок неподвижен внизу, достаточно css
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      body{
        height: 1000px;
      }

       #fixblock{
         position: fixed;
          bottom: 0;
          left: 200px;
           background-color: rgb(211, 211, 211);
       }

 </style>

  </script>
</head>

<body>

<div id="fixblock">Содержимое скользящего блока</div>
</body>
</html>

Сообщение от yafet
Я занимаюсь версткой,
Ответить с цитированием
  #4 (permalink)  
Старый 25.06.2016, 00:37
Новичок на форуме
Отправить личное сообщение для yafet Посмотреть профиль Найти все сообщения от yafet
 
Регистрация: 25.06.2016
Сообщений: 5

Гм,

Во-первых, блок должен «цепляться» к экрану после прокрутки, а не изначально быть зафиксированным в правом нижнем углу.

Во-вторых, position: fixed; — это фиксирование по отношению к окну браузера, когда мне необходимо фиксирование в рамках конкретной колонки (блока). Сайт не «резиновый», есть конкретная ширина, и, если применить position: fixed;, на экранах с большим разрешением блок будет прикреплен где-то вдалеке от сайта (с краю, то есть).
Ответить с цитированием
  #5 (permalink)  
Старый 25.06.2016, 00:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

yafet,
непонятное описание, но на всякий случай
Плавающий блок, замирающий над футером
Ответить с цитированием
  #6 (permalink)  
Старый 25.06.2016, 00:59
Новичок на форуме
Отправить личное сообщение для yafet Посмотреть профиль Найти все сообщения от yafet
 
Регистрация: 25.06.2016
Сообщений: 5

Спасибо, но это как дополнение скрипта, иногда замерзание требуется.

Наглядно можно посмотреть в примере, там именно скриптом сделано. Мне требуется то же самое.
Ответить с цитированием
  #7 (permalink)  
Старый 25.06.2016, 01:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от yafet
Наглядно можно посмотреть в примере
не осилил вашего примера и описания.
Ответить с цитированием
  #8 (permalink)  
Старый 25.06.2016, 01:04
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

http://plnkr.co/edit/pidddQrocgrTNha4pfE1?p=preview

Что-то вроде такого?
Ответить с цитированием
  #9 (permalink)  
Старый 25.06.2016, 01:30
Новичок на форуме
Отправить личное сообщение для yafet Посмотреть профиль Найти все сообщения от yafet
 
Регистрация: 25.06.2016
Сообщений: 5

Сообщение от aklis Посмотреть сообщение
http://plnkr.co/edit/pidddQrocgrTNha4pfE1?p=preview

Что-то вроде такого?
Да, спасибо, но в данном примере происходит скачек. А нужно, чтоб плавно подкреплялся к нижнему краю — при прохождении нижней границы окна — и шел дальше.

Т.е., блок изначально находится не в зоне видимости первого окна. Пользователь скроллит, а когда блок полностью появился в видимости окна (внизу) — применяем блоку position: fixed;.
Ответить с цитированием
  #10 (permalink)  
Старый 25.06.2016, 01:34
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

просто топорно скрипт написан, на плавный вариант нужно чуток больше времени
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно прописать полученные значения с сервера? Dimaz jQuery 0 07.12.2012 19:46
Ползунок как на YouTube и условие. dailclever Элементы интерфейса 1 23.07.2012 19:51
Как правильно составить условие определяющее расширение файлов djadrenaline Общие вопросы Javascript 5 21.07.2012 23:34
Блок как на Цетис Axios Элементы интерфейса 6 16.03.2011 23:36
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 21:34