Javascript scroll spy jquery背后的理论——识别它下面的部分

我正在想办法解决这个问题。我希望在滚动浏览时能够识别我所在的部分。这就是我所拥有的：

$（函数（）{
变量$select=$（'#select'）；
变量$window=$（window）；
var isFixed=假；
var init=$select.length？$select.offset（）。顶部：0；
$window.scroll（函数（）{
var currentScrollTop=$window.scrollTop（）；
if（currentScrollTop>init&&isFixed==false）{
isFixed=true；
$select.css({
排名：0，
位置：'固定'
});
$（'body'）.css（'padding-top'，$select.height（））；
}else if（currentScrollTop=eleDistance）{
var makeActive=$（this.attr（'id'）；
$（“#选择一个”）.removeClass（'active'）；
$（'#选择一个.+makeActive.addClass（'active'）；
}
});
});
$（“.nav”）。单击（函数（e）{
e、 预防默认值（）；
var divId=$（this.attr（'href'）；
$（'body'）。设置动画({
scrollTop:$（divId）.offset（）.top-$select.height（）
}, 500);
});
});

这里的问题是，黄色条必须完全位于该部分内，以便我能够识别它位于该部分并将其设置为活动。例如，如果黄色条位于该部分的顶部或1px处，我仍然会说该部分是活动部分，但黄色条必须完全位于其内部

是否有任何有效且合乎逻辑的方法来实现这一点

---

编辑：作为一个例子，看看这必须在菜单下进行到底，才能知道它在哪个部分：

我真的不明白为什么你需要一个固定的菜单

下面是您发布的示例fiddle的一个实现，它不使用任何固定元素

它的反应更灵敏，甚至有一个小屏幕的移动菜单版本

$(function () {

    var $select = $('#select');
    var $window = $(window);
    var isFixed = false;
    var init = $select.length ? $select.offset().top : 0;

    $window.scroll(function () {
        var currentScrollTop = $window.scrollTop();
        if (currentScrollTop > init && isFixed === false) {
            isFixed = true;
            $select.css({
                top: 0,
                position: 'fixed'
            });
            $('body').css('padding-top', $select.height());
        } else if (currentScrollTop <= init && isFixed === true) {
            isFixed = false;
            $select.css('position', 'relative');

            $('body').css('padding-top', 0);
        }
        //active state in menu
        $('.section').each(function(){
            var eleDistance = $(this).offset().top;
            if (currentScrollTop >= eleDistance) {
                var makeActive = $(this).attr('id');
                $('#select a').removeClass('active');
                $('#select a.' + makeActive).addClass('active');
            }
        });
    });

    $(".nav").click(function (e) {
        e.preventDefault();
        var divId = $(this).attr('href');
        $('body').animate({
            scrollTop: $(divId).offset().top - $select.height()
        }, 500);
    });

});