Question

我有wordpress网站，主页上过滤了博客文章。当您单击其中一个过滤器时，帖子会随所选过滤器的类别而变化。

我想做的是-添加类似于此Fiddle上的“ MagicLine”，并添加一种不同的内容-我需要Magic Line可以在点击时进行转换，而不是悬停。

我也成功了。

第一期

现在，我遇到了我无法解决的问题。“过滤器栏”发粘……当您滚动页面时-过滤器条变得发粘……。问题：滚动时-魔术线正在失去它的位置。。我尝试了很多操作，例如文档滚动和设置新位置-但...-仍然没有。

第二期

有时，当您在过滤器链接之间快速单击时-过滤器“卡住了” ..它不起作用-帖子未替换，并且实际上过滤器jquery函数未运行。仅在启用魔术线功能时才会发生。

/* 
* 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>

Answer 1

您的容器正在滚动调整大小，但是带有蓝色背景的span不会更新位置。

假设您的容器为900像素，然后单击链接，蓝色背景会得到一个left: 100px，因此它从左到左为100像素，滚动时会给出一个width:100%，因此{{1} }不再是正确的数字，它应该是100px加上现在添加到父级的新宽度，或者您可以将导航项和跨度添加到不会改变的单独容器中，而只需更改其父级宽度即可。

jQuery MagicLine-标头粘滞时的问题

1 个答案: