У меня есть сайт WordPress, с фильтрацией постов на главной странице.
При нажатии на один из фильтров - посты меняются по категории выбранного фильтра.
Что я пытаюсь сделать - это добавить "MagicLine", как показано на этом Fiddle , с одним другим - мне нужно, чтобы Magic Line осуществила переход при нажатии и не при наведении .
Мне тоже это удается.
Первый выпуск
Теперь у меня есть проблема, которую я не могу преодолеть. "Панель фильтров" не работает ... когда вы прокручиваете страницу - панель фильтров становится липкой .... Проблема: при прокрутке - Волшебная линия теряет свою позицию . Я пробовал так много вещей, как прокрутка документа и устанавливал новые позиции - но ... все же - ничего.
2-й выпуск
Иногда, когда вы быстро нажимаете между ссылками фильтра - фильтр "застрял" .. он не работает - сообщения не заменяются, и фактически функции jquery фильтра не работают. это происходит только при включенной функции Magic Line.
/*
* Filters transitations effect
* ====================
*/
jQuery(".ee-filters").append('<span id="slide-line"></span>');
var j$ = jQuery,
$nav = j$("ul.ee-filters"),
// $navLi = j$(".filterTitle"),
$slideLine = j$("#slide-line"),
$currentItem = j$(".ee--active");
j$(function(){
// Menu has active item
if ($currentItem[0]) {
//j$($slideLine).text(j$($currentItem).text()),
$slideLine.css({
"width": $currentItem.width() + 30,
"left": $currentItem.position().left - 18,
"top": ($currentItem).position().top,
});
}
// Underline transition
j$('ul.ee-filters li').click(
// Hover on
function(){
//j$($slideLine).text(j$(this).text()).fadeIn('9000'),
$slideLine.css({
"width": j$(this).width(),
"left": j$(this).position().left + 23,
"top": j$(this).position().top + 39,
});
}
);
});
/* END OF FILTERS UNDERLINE TRANSITATIONS EFFECT */
jQuery(document).scroll(function() {
if (jQuery(document).scrollTop() > 60) {
// user scrolled 60 pixels or more;
if ($currentItem[0]) {
$slideLine.css({
"width": $currentItem.width() + 30,
"left": $currentItem.position().left - 15,
"top": $currentItem.position().top + 39,
});
}
}
});
Структура HTML
<ul class="ee-filters ee-filters--category sticky">
<li class="ee-filters__item o-nav__item">
<a class="ee--active" data-filter="*">
<span data-filter="*" class="filterTitle ee--active">All posts</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--culture">
<a data-filter=".ee-filter-1" class="ee-term__link">
<span data-filter=".ee-filter-1" class="filterTitle">Culture</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--kids">
<a data-filter=".ee-filter-2" class="ee-term__link">
<span data-filter=".ee-filter-2" class="filterTitle">Kids</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--events">
<a data-filter=".ee-filter-3" class="ee-term__link">
<span data-filter=".ee-filter-3" class="filterTitle">Events</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--enclosures">
<a data-filter=".ee-filter-4" class="ee-term__link">
<span data-filter=".ee-filter-4" class="filterTitle">Places</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--tours-and-sports">
<a data-filter=".ee-filter-6" class="ee-term__link">
<span data-filter=".ee-filter-6" class="filterTitle">Sports</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--culinary">
<a data-filter=".ee-filter-7" class="ee-term__link">
<span data-filter=".ee-filter-7" class="filterTitle">Food</span>
</a>
</li>
<li class="ee-filters__item o-nav__item ee-term ee-term--parks-and-nature">
<a data-filter=".ee-filter-8" class="ee-term__link">
<span data-filter=".ee-filter-8" class="filterTitle">Parks</span>
</a>
</li>
<span id="slide-line" style="width: 102px; left: 835.953px; top: 40px;"></span></ul>