0

Не работает плагин Sticky Foundation в mozilla. В консоли ошибок нет, все подключено. Windows 10, Firefox 62.0.3 Почему и как исправить?

$(document).foundation();
.x-header {
  height: 20vh;
  background-color: #eaeaea;
}
.x-nav__sticky {
  height: 50px;
  background-color: lightcoral;
}
.x-content {
  height: 150vh;
  background-color: #eaeaea;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.3/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.3/css/foundation.min.css" rel="stylesheet"/>
<div class="x-layout">
  <div class="x-header" id="jsHeader"></div>
  <div class="x-nav" data-sticky-container>
    <div class="x-nav__sticky sticky" data-sticky data-options="marginTop:0;stickyOn:small;"
data-top-anchor="jsHeader:bottom">
      Sticky
    </div>
  </div>
  <div class="x-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>
</div>
</div>

2
  • работает же у меня все ок .
    – Randall
    17 окт 2018 в 13:00
  • я конечно извеняюсь - а просто классический sticky на jquery не вариант ? 17 окт 2018 в 13:00

2 ответа 2

0

Может я чего то не понимаю, но уже давно имеется и поддерживается всеми браузерами

position: sticky

в css. Зачем для такой простой задачи использовать js?

1
  • Как минимум это поддержка браузерами, к тому же нужно что бы sticky срабатывал в определенный момент
    – E_K
    17 окт 2018 в 14:05
0

Проблема в свойстве stikyOn: small, js не может правильно отработать с этим значением. Foundation использует класс foundation-mq для передачи breakpoints в js.

font-family: "small=0em&medium=48em&large=64em&xlarge=75em";

На ПК версии Firefox при получение данных значений через

$('.foundation-mq').css('font-family')

возвращает

"serif, \"small=0em&medium=48em&large=64em&xlarge=75em\""

После, когда js обрабатывает строку, он создает значение не small, а erif, /"small", что приводит к проблемам.

На данный момент, что бы исправить данный баг я добавил к breakpoints перед small точку xs: 0, теперь неправильное название у этой точки, а small работает.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.