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

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем Лузер, 09.03.2015.

  1. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Всем привет. Сделал на сайте модуль который фиксируется при прокрутке страницы когда прячется хедер с меню,это происходит после заданного количества пикселей,в моем случае 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)
     
  2.  
  3. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
  4. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Может и проще,я кстати и этого делать не умею:)
    Но пока не знаю,вроде и с мобильного нормально,если получится так как я писал выше
     
  5. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    Код (css):
    1. @media screen and (min-width: 100px) and (max-width: 399px) {
    2. .cartfix  {display:none}}

    например
     
  6. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо за код,использую если другого выхода не найду))
    А так как я хочу возможно сделать или слишком сложно?
     
  7. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    Наверно) я такое не делал
     
  8. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    я просто видел на другом примере примерно так сделано,как то хедер за высоту взят,вот и решил что и с моим вариантом получится)

    Вчера обнаружил,что когда корзина в позиции 0 (вверху где поиск) она не конфликтует с меню,вот и пихнул ее туда,ну и с affix намутил,вроде прикольно вышло
    --- добавлено: 10.03.2015, первое сообщение размещено: 10.03.2015 ---
    Я уже придумал куда использовать этот код)
    Женя подскажите пожалуйста как реализовать.
    В состоянии affix моя корзина с фоном выглядит так

    362798556d0c.png

    Это у меня получается как хедер фиксированный вверху. По-моему фон пустует (но в моб. версии все ок,там корзина занимает почти всю ширину).
    Как мне помимо корзины,вставить картинку на этот фон (например слева),чтоб она появлялась только в 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">


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

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    это data атрибуты, Вам нужны классы cartfix или affix-top
    Вы можете также задать:
    Код (css):
    1. @media screen and (min-width: 400px) {
    2. .cartfix {background-color: red;}}
     
  10. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

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

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

    Мне надо использовать модули как в описании ко второму скрину,то-есть телефоны в 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; ?>

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

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской

    К сожалению помочь не смогу, т.к. Вы не предоставили ссылку на свой сайт.
    Без этого невозможно подсказать в решении Вашей проблемы.

     
  12. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    XmbPsOO.png

    Код (css):
    1. div#minicart {
    2.   margin-right: 20px;
    3. }


    Вам так надо или нет? Запутался в Ваших предложениях.
     

    Вложения:

    • MiZqJ4W.png
      MiZqJ4W.png
      Размер файла:
      90.2 КБ
      Просмотров:
      6
  13. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Не не так,мне нада чтоб она ниже телефонов была,как на первом скрине)
     
  14. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    13gOweR.png

    Код (css):
    1. .cartfix.affix-top {
    2.   position: relative;
    3. }
    4.  
    5. .cartfix .mystyle {
    6.   position: absolute;
    7.   right: 0px;
    8.   top: 90px;
    9. }
     
  15. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Вот так и хотел,щас проверю и вернусь
    --- добавлено: 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
    А это где?:\
     
    Последнее редактирование: 10.03.2015
  16. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
    а так?
    Код (css):
    1. .cartfix {
    2.   position: relative;
    3. }
    4.  
    5. .cartfix .mystyle {
    6.   position: absolute;
    7.   right: 0px;
    8.   top: 90px;
    9. }
     
  17. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Нет,Жень,опять не то,она так вообще не всплывает с компа,а с телефона вот так
    547a3518cfb8.png

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

Поделиться этой страницей

Загрузка...