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

OR

2- https://startbootstrap.com/template-overviews/scrolling-nav/ （研究其代码）

注意：强烈推荐的Bootstrap ScrollSpy（简单易用的实现） http://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp

希望这有帮助！

前三个菜单工作正常，其他菜单不工作

1 个答案: