基金會粘滯導航

我有一個從基礎粘滯導航問題。基金會粘滯導航

我有以下的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）的粘導航未收到類「是粘連」和固定造型沒有按」工作。

我無法弄清楚那個css文件中有什麼特別之處，以及是什麼讓它勾起來的，我調試了好幾個小時，卻找不到我失蹤的東西。

我需要那是卡住類別做一些其他樣式的兒童。

幫助將不勝感激。

預先感謝您。

來源

2017-01-09 Claudiu Ticu

你可以嘗試使用jQuery函數來添加和移除滾動條上的「is-stuck」類。並在標題欄類中添加背景。 [https://jsfiddle.net/tjbaezid/Lomx8y4c/] –

感謝您的建議Mostafa，但如果我不會很快找到解決方案，作爲最後的手段，我將加載基礎的CSS，但我不想做任何javascripts技巧。 –

最後，我設法找到了，如果我在SASS文件添加以下行：

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

一切會工作得很好。要找到此修復程序，我從基礎分解了整個CSS文件。

謝謝誰試圖幫助。

來源

2017-01-10 12:49:06

基金會粘滯導航

回答

相關問題