Jquery MagicLine - header 粘滞时出现问题

Question

我有 wordpress 网站，主页上有博客文章过滤功能。当您单击其中一个过滤器时 - 帖子会根据所选过滤器的类别发生变化。

我想做的是添加“MagicLine”，就像发布在这个 Fiddle 上的一样，有一个不同 - 我需要 Magic Line 将在点击而不是悬停时进行转换。

我也成功了。

第 1 期

现在，我遇到了无法解决的问题。“过滤栏”很粘...当您滚动页面时 - 过滤栏会变得很粘...问题:在滚动时 -神奇的线正在失去它的位置。我尝试了很多东西，比如文档滚动和设置新位置 - 但......仍然 - 没有。

第 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>

Answer 1

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

假设你的容器是 900px，你点击一个链接，蓝色背景得到一个 left: 100px 所以它从左边开始 100px，当你滚动时你给一个 width: 100% 所以 left:100px 不再是正确的数字，它应该是 100px 加上现在添加到父级的新宽度，或者您可以只添加导航项和跨度在一个单独的容器中，不会改变，只会改变他 parent 的宽度。