主页 / 问题 / 894318
Accepted
E_K
Asked:2020-10-17 20:46:02 +0000 UTC2020-10-17 20:46:02 +0000 UTC

Sticky Foundation 插件在 Mozilla 中不起作用

  • 772

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>

javascript

2 个回答

  1. 可能有些看不懂，不过早就有，所有浏览器都支持

    position: sticky

    在 CSS 中。为什么要使用 js 来完成这么简单的任务？

    • 0
  2. Best Answer

    问题出在属性stikyOn: small中，js它无法使用此值正常工作。Foundation 使用一个类foundation-mq传递breakpoints给js.

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

    在 PC 版Firefox上，当通过

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

    返回

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

    之后，js 处理字符串时，会创建值 not small, but erif, /"small"，这会导致问题。

    目前，为了修复这个错误，我在它breakpoints之前添加了一个small点xs: 0，现在这个点的名称不正确，但small它可以工作。

    • 0

相关问题