如何在导航到达另一个顶部导航时使其导航

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