Question

我的基础粘性导航存在问题。

我有以下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();

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

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

正如您将能够在此代码笔示例中看到的那样（http://codepen.io/anon/pen/ggaXem），粘性导航无法收到＆＃34; is-stuck＆class ＃34; ，固定样式不起作用。

我无法弄清楚那个css文件中有什么特别之处以及是什么让它打勾，我调试了好几个小时并且无法弄清楚我错过了什么。

我需要卡住课程来为孩子们做一些其他造型。

非常感谢帮助。

提前谢谢。

Answer 1

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

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

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

感谢谁试图提供帮助。

基础粘性导航

1 个答案: