Фиксированная позиция для контейнера

one
На сайте с 15.04.2007
Offline
336
one
1027

Как то попадались мне на сайтах такие блоки которые имели фиксированную позицию, для интереса просматривал код таких страниц в котором было видно что при прокрутки страница до определенной позиции контейнеру подставлялся класс содержащий position: fixed; Чем данная фича реализована?

Себе захотелось такого. Буду благодарен за подсказки.:)

Решения для автоматизации действий ( https://www.facebook.com/automationstudio20/ ) в интернете.
W
На сайте с 18.02.2014
Offline
13
#1

Не совсем понял, что вы имеете ввиду, но подозреваю что был задействован jquery.

Хотя и чистым css можно многое.

В общем, дайте, пожалуйста, пример =)

Дизайн сайтов. Пунктуально (/ru/forum/854455)
one
На сайте с 15.04.2007
Offline
336
one
#2

Примера к сожалению нет. На словах выглядит так. С лева три блока, друг под другом, прокручивая страницу в низ, верхняя граница броузера цепляет один из них и тащит за собой.:D В коде видел что подставляется класс с postion: fixed как верхняя часть броузера достигла блока. При прокрутки в верх блок возвращается на место.

D.iK.iJ
На сайте с 26.05.2013
Offline
236
#3

Можно довольно простеньким Javascriptом. Достаточно измерять высоту прокрутки и в нужный момент присваивать класс.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
one
На сайте с 15.04.2007
Offline
336
one
#4
DiKiJ:
Можно довольно простеньким Javascriptом. Достаточно измерять высоту прокрутки и в нужный момент присваивать класс.

Подкиньте это простенький сриптец плс.

werty1001
На сайте с 30.03.2008
Offline
82
#5

Jquery


$(window).scroll(function(){
var a=$(window).scrollTop(),
b=$("ваш элемент"),
c=b.offset().top;

a>c&&b.css("position", "fixed");
a<c&&b.css("position", "static");

});
Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий