Фиксированный модуль при прокрутке

Всем привет. Сделал на сайте модуль который фиксируется при прокрутке страницы когда прячется хедер с меню,это происходит после заданного количества пикселей,в моем случае 220px . Все работает,но с мобильной версии есть погрешности из за разницы в размерах,код выглядит так

Код (PHP):

1. <?php if($this->countModules('cartfix')) : ?>
2.   <div class="cartfix affix-top" data-spy="affix" data-offset-top="220">
3.   <div class="inner">
4.   <div class="header-search pull-right">
5.   <jdoc:include type="modules" name="cartfix" />
6.   </div>
7.   </div>
8.   </div>
9.   <?php endif; ?>

Подскажите пожалуйста,можно как то сделать,чтоб это значение data-offset-top="220" задавалось не в пикселях,а например чтоб мой модуль появлялся-становился фиксированным (affix) после прокрутки-исчезновения меню (navigation)

 

Может и проще,я кстати и этого делать не умею
Но пока не знаю,вроде и с мобильного нормально,если получится так как я писал выше

 

Спасибо за код,использую если другого выхода не найду))
А так как я хочу возможно сделать или слишком сложно?

 

я просто видел на другом примере примерно так сделано,как то хедер за высоту взят,вот и решил что и с моим вариантом получится)

Вчера обнаружил,что когда корзина в позиции 0 (вверху где поиск) она не конфликтует с меню,вот и пихнул ее туда,ну и с affix намутил,вроде прикольно вышло

--- добавлено: 10.03.2015, первое сообщение размещено: 10.03.2015 ---

Я уже придумал куда использовать этот код)
Женя подскажите пожалуйста как реализовать.
В состоянии affix моя корзина с фоном выглядит так



Это у меня получается как хедер фиксированный вверху. По-моему фон пустует (но в моб. версии все ок,там корзина занимает почти всю ширину).
Как мне помимо корзины,вставить картинку на этот фон (например слева),чтоб она появлялась только в affix а потом уже к ней приделать
@media screen and (min-width: 100px) and (max-width: 399px) {
.cartfix {display:none}}

Если я правильно понимаю,мне нужно создать еще одну позицию модуля на подобии этой,но как мне сделать ее исключительно affix?
Мне кажется тут надо что-то поменять,но что не допетрю

Код (PHP):

1. <div class="cartfix affix-top" data-spy="affix" data-offset-top="220">

Или возможно как то сунуть картинку в этот же модуль но задать ей отдельный стиль-координаты?
Надеюсь не очень запутал)

 

Честно говоря не понял как сделать,туплю наверное.
Подскажите тогда другой момент Жень,если знаете как исправить
Ставлю два модуля в хедер
На первом скрине оба модуля в position - 0 ,все выглядит как надо (то-есть модуль с телефонами сверху,корзина под ним)


На втором скрине модуль с телефонами в position- 0, а корзина в добавленной мною позиции cartfix


Мне надо использовать модули как в описании ко второму скрину,то-есть телефоны в position- 0 а корзину в cartfix ,но сами видите как это выглядит.
Методом тыка пытался всякие float менять ничего не получается,cartfix я практически скопировал с position- 0,не понимаю почему так получается

В индексе выглядит так

Код (PHP):

1. <div class="header-search pull-right">
2.              <jdoc:include type="modules" name="position-0" style="none" />
3.            </div>
4.    
5.   <?php if($this->countModules('cartfix')) : ?>
6.   <div class="cartfix affix-top" data-spy="affix" data-offset-top="220">
7.   <div class="mystyle">
8.   <div class="inner">
9.   <div class="header-search pull-right">
10.   <jdoc:include type="modules" name="cartfix" />
11.   </div>
12.   </div>
13.   </div>
14.   </div>
15.   <?php endif; ?>

Может знаете решение,как сделать чтоб выглядило как на первом скрине

 

Не не так,мне нада чтоб она ниже телефонов была,как на первом скрине)

 

Вот так и хотел,щас проверю и вернусь

--- добавлено: 10.03.2015, первое сообщение размещено: 10.03.2015 ---

Нет,чето не то делаем,так все отлично но когда в аффикс переходит ужас)

Насколько я понял эти top: 90px; и в affix переходят,и right: 0px; тоже.

Я правильно понимаю или нет,через 220px стиль меняется на тот который у меня вписан

Код (css):

1. .cartfix.affix {
2.   top: 0px;
3.   width: 940px;
4.   z-index: 1000;
5.   background: url("/images/pic/header.jpg") repeat scroll 0px 0px transparent;
6.   padding-left: 20px;
7.   padding-right: 20px;
8.   margin-right: -20px;
9.   margin-left: -20px;
10.   padding-top: 3px;
11.   padding-bottom: 4px;
12.   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
13. }

Значит надо поменять что-то в стиле когда еще не включился .cartfix.affix
А это где

 

Нет,Жень,опять не то,она так вообще не всплывает с компа,а с телефона вот так


Бросьте,что-то слишком затянулось,не стоит ваших трудов. Сделаю по другому фиг с ним. Спасибо большое за помощь