Блок, фиксированный на одном месте

[Светлана Г.]

Здравствуйте!

Задача состоит в следующем: сайт с фиксированной шириной. Нужно разместить кнопку "Заказать звонок" так, чтобы она всегда находилась в одном месте относительно края общего блока, а не области просмотра.

 

Как это сделать? Если можно, то без JS.

 

Edited August 6, 2014 by Светлана Г.

[Galaxy]

position fixed ?

[Светлана Г.]

position fixed ?

Не подходит, т.к. позиционируется относительно области просмотра.

[Ghost86421]

header {

/*...*/

position: relative;

}

header .call-to {

/*...*/

position: absolute;

bottom: -20px; /*height button*/

right: 0;

}

[web911]

У родительского элемента  position: relative;

 

Заказать звонок    position: absolute;

 

top, left.... двигайте куда угодно

 

Отсчет координат для Заказать звонок будет вестись от края родительского элемента

 

 

P.S.Пока я формулировал, Ghost86421 обогнал 

Edited August 6, 2014 by web911

[Светлана Г.]

При прокрутке кнопка также должна оставаться наверху.

[Светлана Г.]

Пока нашла такое решение: http://dimox.name/position_fixed_for_child_block/

 

К сожалению, не совсем то.;(

Edited August 7, 2014 by Светлана Г.

[Светлана Г.]

Вот немного доработанное решение для моего случая: http://jsfiddle.net/SvetaGr/gez3Lopf/

[web911]

 

Вот немного доработанное решение

При прокрутке фиксируемый блок остаётся на месте, не удобно

Тогда уж лучше плавающий блок на jQuery, есть  простые решения в несколько строк

[Светлана Г.]

Тогда уж лучше плавающий блок на jQuery, есть  простые решения в несколько строк

 

 

А где можно посмотреть пример такого решения?

[web911]

Как вариант посмотрите здесь shpargalkablog.ru/2013/09/scroll-block.html

Ещё на выбор:

 

ruseller.com/adds/adds2397/example/

 

Пример css-tricks.com/examples/PersistantHeaders/,  скачать отсюда css-tricks.com/snippets/jquery/persistant-headers-on-tables/

Edited August 7, 2014 by web911

[Светлана Г.]

Как вариант посмотрите здесь shpargalkablog.ru/2013/09/scroll-block.html

Ещё на выбор:

 

ruseller.com/adds/adds2397/example/

 

Пример css-tricks.com/examples/PersistantHeaders/,  скачать отсюда css-tricks.com/snippets/jquery/persistant-headers-on-tables/

Спасибо большое! Жду ответа от дизайнера - что они с заказчиком выберут....

[Светлана Г.]

Выбрали вариант с прилипанием при скролле: http://shpargalkablog.ru/2013/09/scroll-block.html

 

Вот что у меня получилось:

 

http://jsfiddle.net/SvetaGr/gez3Lopf/2/

 

Проблема в том, что при скролле кнопка встает слева. Как решить эту проблему?

 

И еще: будет ли этот вариант работать в iOS? Как я читала, некоторые подобные решения не работают там.

Edited August 8, 2014 by Светлана Г.

[web911]

Проблема в том, что при скролле кнопка встает слева. Как решить эту проблему?

.sticky   >>> например right: 0; попробовать

 

fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom....

Источник htmlbook.ru/css/position

[Светлана Г.]

 

Проблема в том, что при скролле кнопка встает слева. Как решить эту проблему?

.sticky   >>> например right: 0; попробовать

 

fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom....

Источник htmlbook.ru/css/position

 

right:0; не поможет - будет висеть справа относительно окна браузера. Выше я уже обо всем этом писала... 

 

Надо просить кого-то написать свой скрипт, скорее всего...

Похоже на то, что здесь: http://sticky01.blogspot.ru/2013/09/3.html дописан скрипт, который заставляет блок оставаться на прежнем месте.

Edited August 8, 2014 by Светлана Г.

[web911]

right:0; не поможет - будет висеть справа относительно окна браузера

 

 

Смотрите внимательно css, сравните с примером

 

Уже писал У родительского элемента  position: relative; ........Отсчет координат для Заказать звонок будет вестись от края родительского элемента

 

 

 

 

Надо просить кого-то написать свой скрипт, скорее всего..

 

Решений в сети очень много, как хотите

Edited August 8, 2014 by web911

[Светлана Г.]

Вот у родителя и прописано:

 

#container {

position: relative;

}

[web911]

Прямо сейчас некогда смотреть, монстры атакуют 

 

Гляньте здесь web911.com.ua на сайдбар при прокрутке, может подойдёт 

Скрипт web911.com.ua/theme/template/js/sidebar.js и, соответственно jQuery v1.11.1