jquery - 前三个菜单工作正常，其他菜单无法使用

Question

当有人到达 jquery 中的那个 div/部分时，我想更改菜单背景三部分工作正常但之后我的代码不起作用我不知道为什么，两天以来它吸我的血请在这里解决我的问题 its live site

这是我的 jQuery 代码

    var cul_home = $("#home").offset().top;
    var cul_culture = $("#culture").offset().top;
    var cul_work = $("#work").offset().top;
    var cul_services = $("#services").offset().top;
    var cul_careers = $("#careers").offset().top;
    var cul_contactus= $("#contactus").offset().top;
    var cul_locations= $("#locations").offset().top


    var $topscrol = $(window).scroll(function(){
    if ($topscrol.scrollTop() > cul_home)
    {   
        $('#menu-item-1726').addClass('cltbck');//home
        $('#menu-item-1715').removeClass('cltbck');//culture
        $('#menu-item-1717').removeClass('worbck');//work
        $('#menu-item-1718').removeClass('serbck');//servicess
        $('#menu-item-1719').removeClass('cerbck');//careers
        $('#menu-item-1720').removeClass('conbck');//contactus
        $('#menu-item-1721').removeClass('locbck');//locations
    }
    else
    {
        $('#menu-item-1726').removeClass('cltbck');//home
    }
    if($topscrol.scrollTop() > cul_culture)
    {
        $('#menu-item-1726').removeClass('cltbck');//home
        $('#menu-item-1715').addClass('cltbck');//culture
        $('#menu-item-1717').removeClass('worbck');//work
        $('#menu-item-1718').removeClass('serbck');//servicess
        $('#menu-item-1719').removeClass('cerbck');//careers
        $('#menu-item-1720').removeClass('conbck');//contactus
        $('#menu-item-1721').removeClass('locbck');//locations
    }
    else
    {
        $('#menu-item-1715').removeClass('cltbck');//home
    }

    if($topscrol.scrollTop() > cul_work)
    {
        $('#menu-item-1726').removeClass('cltbck');//home
        $('#menu-item-1715').removeClass('cltbck');//culture
        $('#menu-item-1717').addClass('worbck');//work
        $('#menu-item-1718').removeClass('serbck');//servicess
        $('#menu-item-1719').removeClass('cerbck');//careers
        $('#menu-item-1720').removeClass('conbck');//contactus
        $('#menu-item-1721').removeClass('locbck');//locations

    }
    else
    {
        $('#menu-item-1717').removeClass('worbck');//home
    }
    if($topscrol.scrollTop() > cul_services)
    {
        $('#menu-item-1726').removeClass('cltbck');//home
        $('#menu-item-1715').removeClass('cltbck');//culture
        $('#menu-item-1717').removeClass('worbck');//work
        $('#menu-item-1718').addClass('serbck');//servicess
        $('#menu-item-1719').removeClass('cerbck');//careers
        $('#menu-item-1720').removeClass('conbck');//contactus
        $('#menu-item-1721').removeClass('locbck');//locations

    }
    else
    {
        $('#menu-item-1718').removeClass('serbck');//home
    }
    if($topscrol.scrollTop() > cul_careers)
    {
        $('#menu-item-1726').removeClass('cltbck');//home
        $('#menu-item-1715').removeClass('cltbck');//culture
        $('#menu-item-1717').removeClass('worbck');//work
        $('#menu-item-1718').removeClass('serbck');//servicess
        $('#menu-item-1719').addClass('cerbck');//careers
        $('#menu-item-1720').removeClass('conbck');//contactus
        $('#menu-item-1721').removeClass('locbck');//locations

    }
    else
    {
         $('#menu-item-1719').removeClass('cerbck');//home
    }

    if($topscrol.scrollTop() > cul_contactus)
    {
        $('#menu-item-1726').removeClass('cltbck');//home
        $('#menu-item-1715').removeClass('cltbck');//culture
        $('#menu-item-1717').removeClass('worbck');//work
        $('#menu-item-1718').removeClass('serbck');//servicess
        $('#menu-item-1719').removeClass('cerbck');//careers
        $('#menu-item-1720').addClass('conbck');//contactus
        $('#menu-item-1721').removeClass('locbck');//locations

    }
    else
    {
        $('#menu-item-1720').removeClass('conbck');//contactus
    }

    if($topscrol.scrollTop() > cul_locations)
    {
        $('#menu-item-1726').removeClass('cltbck');//home
        $('#menu-item-1715').removeClass('cltbck');//culture
        $('#menu-item-1717').removeClass('worbck');//work
        $('#menu-item-1718').removeClass('serbck');//servicess
        $('#menu-item-1719').removeClass('cerbck');//careers
        $('#menu-item-1720').removeClass('conbck');//contactus
        $('#menu-item-1721').addClass('locbck');//locations

    }
    else
    {
        $('#menu-item-1721').removeClass('locbck');//locations
    }

});

Answer 1

使用以下插件之一来解决您的滚动问题，它还有助于减少代码行并提高性能。

1- http://alvarotrigo.com/fullPage/#firstPage

或

2- https://startbootstrap.com/template-overviews/scrolling-nav/(研究它的代码)

注意:强烈推荐 Bootstrap ScrollSpy(简单易实现) http://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp

希望这对您有所帮助!