当导航到达另一个顶部导航时如何使导航保持粘性

Question

我有两个导航，一个在顶部，另一个在内容中。当第二个子菜单到达顶部菜单而不是浏览器的最顶部偏移时，我尝试使第二个子菜单具有粘性。但是当它滚动到顶部时，我没有让它变得粘稠。另外，当活动“href”滚动时，如何在菜单项上添加类。

JSfiddle Here

JS 代码

$(document).ready(function() {
    var $filter = $('.denpen-menu');
    var $filterSpacer = $('<div />', {
        "class": "filter-drop-spacer",
        "height": $filter.outerHeight()
    });

    if ($filter.size())
    {
        $(window).scroll(function ()
        {
            if (!$filter.hasClass('navbar-fixed') && $(window).scrollTop() > $filter.offset().top)
            {
                $filter.before($filterSpacer);
                $filter.addClass("navbar-fixed");
            }
            else if ($filter.hasClass('navbar-fixed')  && $(window).scrollTop() < $filterSpacer.offset().top)
            {
                $filter.removeClass("navbar-fixed");
                $filterSpacer.remove();
            }
        });
    }
});

Answer 1

首先我们应该获取subNav的起始位置并将其存储为"startingPoint"

var startingPoint = $('.stuckMenu').offset().top - 48;

请注意- 48 部分，这大约是我们主导航的高度，并且稍微小一点，以便在触摸时感觉更好。

逻辑的关键部分在这里：

if (!subNav.hasClass('navbar-fixed') && $(window).scrollTop() > startingPoint)
{     
    $filter.addClass("navbar-fixed");
}
else if(subNav.hasClass('navbar-fixed') && $(window).scrollTop() < startingPoint)
{      
    $filter.removeClass("navbar-fixed");
}

我们问的地方：

1. 我们的 subNav 粘了吗？当前窗口的顶部是否正在触摸它？

   好的，它还没有粘性，但是窗口碰到了它，让它变得粘性 - 固定。

2. 好的，所以我们的 subNav 是粘性的，窗口顶部是否高于我们的 subNav 的原始位置？

   在上面吗？好的，我不希望它再粘人了，所以我们将删除该类。

Check out the example here