0
У меня проблема с липкой навигацией от основания.Основание липкая навигация
я следующий 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>
Я следующий дерзость код:
.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 и что делает его тикающим, я отлаживал часами и не могу понять, чего я не вижу.
Мне нужно, чтобы был застрял класс, чтобы сделать некоторые другие стили для детей.
Помощь будет очень признательна.
Заранее спасибо.
вы можете попробовать функцию jQuery для добавления и удаления класса «застряли» в прокрутке. И добавьте фон в класс заголовка. [https://jsfiddle.net/tjbaezid/Lomx8y4c/] –
Спасибо за ваше предложение Mostafa, но если я не найду решение в ближайшее время, в крайнем случае я загружу css, но я не хочу делать любые трюки javascripts. –