基础粘性导航答案

【问题标题】：Foundation sticky navigation基础粘性导航
【发布时间】：2017-05-24 00:18:36
【问题描述】：

我对来自 Foundation 的粘性导航有疑问。

我有以下 HTML 代码：

<div data-sticky-container>
    <div class="title-bar sticky" data-sticky data-options="marginTop:0; stickTo:top;">
        text nave something
    </div>
</div>

<div style="height: 2000px;">
    lorem ipsum text here lorem ipsum text here lorem ipsum text here lorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text herelorem ipsum text here
</div>

我有以下 sass 代码：

.sticky-container {
    position: relative;
    background: #ff0;
}

.sticky {
    position: relative;
    z-index: 0;
    transform: translate3d(0, 0, 0);
}

.sticky.is-stuck {
    position: fixed;
    z-index: 5;

    &.is-at-top {
        top: 0;
    }

    &.is-at-bottom {
        bottom: 0;
    }
}

.sticky.is-anchored {
    position: relative;
    right: auto;
    left: auto;

    &.is-at-bottom {
        bottom: 0;
    }
}

并在 javascript 中像这样调用基础：

$(document).foundation();

我想使用foundation的内置功能进行粘性导航，但我不想添加整个css文件：

<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">

正如您将在此代码笔示例 (http://codepen.io/anon/pen/ggaXem) 中看到的那样，sticky 导航不接收类 "is-stuck" 并且固定样式不起作用。

我无法弄清楚那个 css 文件有什么特别之处，以及是什么让它打勾，我调试了好几个小时，还是不知道我缺少什么。

我需要那个 is-stuck 类来为孩子做一些其他的造型。

我们将不胜感激。

提前谢谢你。

【问题讨论】：

您可以尝试使用 jQuery 函数在滚动条上添加和删除“is-stuck”类。并在标题栏类上添加背景。 [jsfiddle.net/tjbaezid/Lomx8y4c]
感谢Mostafa的建议，但如果我不能很快找到解决方案，作为最后的手段，我会加载基础css，但我不想做任何javascripts技巧。跨度>

标签： javascript jquery html sass zurb-foundation

【解决方案1】：

最后，我发现如果我在我的 SASS 文件中添加以下行：

.foundation-mq {
    font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em";             
}

一切都会好起来的。为了找到这个修复，我从基础分解了整个 CSS 文件。

感谢您的帮助。

【讨论】：