javascript - 页脚上的导航栏事件滚动

Question

除了一个问题外，我的单页布局工作正常。单击时导航栏链接会根据用户转到或滚动的位置更改颜色。

问题是，当我单击“联系我们”链接时，导航栏会滚动到该位置，但导航栏链接不会更改颜色，如上图所示。它适用于所有其他部分，但不适用于底部，因为该区域不够大。

window.onload=function(){
        // Cache selectors
        var lastId,
                topMenu = $("#top-menu"),
                topMenuHeight = topMenu.outerHeight()+15,
                // All list items
                menuItems = topMenu.find("a"),
                // Anchors corresponding to menu items
                scrollItems = menuItems.map(function(){
                    var item = $($(this).attr("href"));
                    if (item.length) { return item; }
                });

        // Bind click handler to menu items
        // so we can get a fancy scroll animation
        menuItems.click(function(e){
            var href = $(this).attr("href"),
                    offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
            $('html, body').stop().animate({ 
                    scrollTop: offsetTop
            }, 300);
            e.preventDefault();
        });

        // Bind to scroll
        $(window).scroll(function(){
            // Get container scroll position
            var fromTop = $(this).scrollTop()+topMenuHeight;

            // Get id of current scroll item
            var cur = scrollItems.map(function(){
                    if ($(this).offset().top < fromTop)
                        return this;
            });

        // Get the id of the current element
        cur = cur[cur.length-1];
        var id = cur && cur.length ? cur[0].id : "";

        if (lastId !== id) {
                lastId = id;
            // Set/remove active class
            menuItems
                .parent().removeClass("active")
                .end().filter("[href='#"+id+"']").parent().addClass("active");
        }                   
        });
        }//]]>

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.otf')
}

@font-face {
    font-family: 'MontserratSlim';
    src: url('fonts/Montserrat-ExtraLight.otf')
}

body    {
        font-family: Helvetica, Arial;
    margin: 0px;
}


#header {
    top: 0px;
}

.signsize   {
    width: 140px; 
    height: 90px;
    }

.movesimg   {
    float: right;
    }

.packing    {
    float: left;
    }

h1  {
    font-family: 'Montserrat';
    font-size: 50px;
    text-align: right;
    color: #3d3d3d;
    margin:0;
    }

h2  {
    margin: 0;
    color: #3d3d3d;
    }

h3  {
    color: #3d3d3d;
    }

h4  {
    font-family: 'Montserrat';
    font-size: 50px;
    text-align: left;
    color: #3d3d3d;
    margin:0;
    }

h5  {
    font-size: 50px;
    padding-top: 60px;
    color: #3d3d3d;
    margin: 0;
    }

h6  {
    font-family: 'MontserratSlim';
    font-size: 15px;
    text-align: left;
    color: #929292;
    margin:0;
    }

#descriptionl   {
    font-family: 'MontserratSlim';
    font-size: 15px;
    color: #929292;
    margin:0;
    }

#descriptionr   {
    font-family: 'MontserratSlim';
    font-size: 15px;
    color: #929292;
    text-align: right;
    margin:0;
    }


#movessec   {
    display: inline-block;
    padding-top: 60px;
    padding-bottom: 60px;
    border-bottom: solid thin #d8d8d8;
    }   


#navbar {
    position: fixed;
    z-index: 1;
        background: white;
        right: 0px;
        top: 0px;
    width: 100%;
}

#logo   {
    float: left;
    margin-left: 10%;
    padding-top: 10px;
    padding-bottom: 10px;
}

#top-menu {
    z-index: 1;
    float: right;
    padding-right: 10%;
    padding-top: 25px;
    padding-bottom: 25px;

}

#top-menu li {
        float: left;
    list-style-type: none;
    white-space: nowrap;
    font-size: 15px;
    font-family: Montserrat;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
}

#more   {
    padding-left: 50px;
    }

#moreR  {
    padding-right: 50px;
    }

#more li {
        float: left;
    list-style-type: none;
    white-space: nowrap;
    font-size: 15px;
    font-family: Montserrat;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    padding: 8px;
    outline: #4690d4 solid thin;
    text-decoration: none;
}

#moreR li {
        float: right;
    list-style-type: none;
    white-space: nowrap;
    font-size: 15px;
    font-family: Montserrat;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    padding: 8px;
    outline: #4690d4 solid thin;
    text-decoration: none;
}
#top-menu a {
        display: inline;
        width: 6em;
        text-align: center;
    padding: 15px;
        -webkit-transition: .5s all ease-out;
        -moz-transition: .5s all ease-out;
        transition: .5s all ease-out;
        color: #545454;
        text-decoration: none;
    letter-spacing: 1px;
}

#top-menu a:hover {
        color: #575757;
}

#top-menu li.active a {     
        color: white;
    position: relative;
    background: #4690d4;
}

#home {
    padding-left: 70px;
    padding-top: 150px;
        height: 800px;
    background-image: url(img/movingboxes.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Montserrat;
}

#services   {
    height: 1600px;
    }

#servicesleft   {
    float: left;
    height: 100%;
    width: 12%;
    }

#servicesmain   {
    float: left;
    height: 100%;
    width: 76%;
    }

#servicesright  {
    float: left;
    height: 100%;
    width: 12%;
    }


#moving {
        height: 800px;
    padding-top: 50px;
    padding-left: 12%;
    padding-right: 12%;
    background-image: url('img/cardboardbright.jpg');
    font-family: Montserrat;
}

#quote {
    height: 800px;
    background: grey;
}

#contact {
    height: 325px;
}

#contactleft    {
    float: left;
    height: 100%;
    width: 12%;
    background: white;
}

#contactmain    {
    float: left;
    height: 100%;
    width: 76%;
    background: white;
}

#contactright   {
    float: left;
    height: 100%;
    width: 12%;
    background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div id="header">

        <div id="navbar">
            <div id="logo">
                <img src="logosmall.png">
            </div>
                <ul id="top-menu">
                    <li class="active">
                            <a href="#home">Home</a>
                    </li>
                    <li>
                            <a href="#services">Services</a>
                    </li>
                    <li>
                            <a href="#moving">Moving Tips</a>
                    </li>
                    <li>
                            <a href="#quote">Get A Quote</a>
                    </li>
                    <li>
                            <a href="#contact">Contact Us</a>
                    </li>
                </ul>
        </div>
        </div>

        <div id="home">
            Content Here.
        </div>

        <div id="services">
        <div id="servicesleft"></div>
        <div id="servicesmain">
            <div id="movessec">
                Content Here.   
            </div>

            <div id="movessec">
                Content Here.   
            </div>

            <div id="movessec">
                Content Here.   
            </div>
        </div>
        <div id="servicesright"></div>
        </div>  


        <div id="moving">Content here.</div>    

        <div id="quote">Quote form goes here.</div>

        <div id="contact">
            <div id="contactleft">Content Here</div>
                <div id="contactmain">Content Here</div>
            <div id="contactright">Content Here</div>
        </div>


    </body>

Answer 1

你可以将active类的改变移动到点击，这里我注释掉了滚动发生的改变，将它移动到点击事件，并且还添加了一行来获取编号:

window.onload=function(){
        // Cache selectors
        var lastId,
                topMenu = $("#top-menu"),
                topMenuHeight = topMenu.outerHeight()+15,
                // All list items
                menuItems = topMenu.find("a"),
                // Anchors corresponding to menu items
                scrollItems = menuItems.map(function(){
                    var item = $($(this).attr("href"));
                    if (item.length) { return item; }
                });

        // Bind click handler to menu items
        // so we can get a fancy scroll animation
        menuItems.click(function(e){
            var href = $(this).attr("href"),
                    id = href.split('#')[1],
                    offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
            $('html, body').stop().animate({ 
                    scrollTop: offsetTop
            }, 300);
            e.preventDefault();

            menuItems.parent().removeClass("active").end().filter("[href='#"+id+"']").parent().addClass("active");
        });

        // Bind to scroll
        $(window).scroll(function(){
            // Get container scroll position
            var fromTop = $(this).scrollTop()+topMenuHeight;

            // Get id of current scroll item
            var cur = scrollItems.map(function(){
                    if ($(this).offset().top < fromTop)
                        return this;
            });

        // Get the id of the current element
        cur = cur[cur.length-1];
        var id = cur && cur.length ? cur[0].id : "";

        if (lastId !== id) {
                lastId = id;
            // Set/remove active class
            //menuItems
            //    .parent().removeClass("active")
            //    .end().filter("[href='#"+id+"']").parent().addClass("active");
        }                   
        });
        }//]]>

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.otf')
}

@font-face {
    font-family: 'MontserratSlim';
    src: url('fonts/Montserrat-ExtraLight.otf')
}

body    {
        font-family: Helvetica, Arial;
    margin: 0px;
}


#header {
    top: 0px;
}

.signsize   {
    width: 140px; 
    height: 90px;
    }

.movesimg   {
    float: right;
    }

.packing    {
    float: left;
    }

h1  {
    font-family: 'Montserrat';
    font-size: 50px;
    text-align: right;
    color: #3d3d3d;
    margin:0;
    }

h2  {
    margin: 0;
    color: #3d3d3d;
    }

h3  {
    color: #3d3d3d;
    }

h4  {
    font-family: 'Montserrat';
    font-size: 50px;
    text-align: left;
    color: #3d3d3d;
    margin:0;
    }

h5  {
    font-size: 50px;
    padding-top: 60px;
    color: #3d3d3d;
    margin: 0;
    }

h6  {
    font-family: 'MontserratSlim';
    font-size: 15px;
    text-align: left;
    color: #929292;
    margin:0;
    }

#descriptionl   {
    font-family: 'MontserratSlim';
    font-size: 15px;
    color: #929292;
    margin:0;
    }

#descriptionr   {
    font-family: 'MontserratSlim';
    font-size: 15px;
    color: #929292;
    text-align: right;
    margin:0;
    }


#movessec   {
    display: inline-block;
    padding-top: 60px;
    padding-bottom: 60px;
    border-bottom: solid thin #d8d8d8;
    }   


#navbar {
    position: fixed;
    z-index: 1;
        background: white;
        right: 0px;
        top: 0px;
    width: 100%;
}

#logo   {
    float: left;
    margin-left: 10%;
    padding-top: 10px;
    padding-bottom: 10px;
}

#top-menu {
    z-index: 1;
    float: right;
    padding-right: 10%;
    padding-top: 25px;
    padding-bottom: 25px;

}

#top-menu li {
        float: left;
    list-style-type: none;
    white-space: nowrap;
    font-size: 15px;
    font-family: Montserrat;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
}

#more   {
    padding-left: 50px;
    }

#moreR  {
    padding-right: 50px;
    }

#more li {
        float: left;
    list-style-type: none;
    white-space: nowrap;
    font-size: 15px;
    font-family: Montserrat;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    padding: 8px;
    outline: #4690d4 solid thin;
    text-decoration: none;
}

#moreR li {
        float: right;
    list-style-type: none;
    white-space: nowrap;
    font-size: 15px;
    font-family: Montserrat;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    padding: 8px;
    outline: #4690d4 solid thin;
    text-decoration: none;
}
#top-menu a {
        display: inline;
        width: 6em;
        text-align: center;
    padding: 15px;
        -webkit-transition: .5s all ease-out;
        -moz-transition: .5s all ease-out;
        transition: .5s all ease-out;
        color: #545454;
        text-decoration: none;
    letter-spacing: 1px;
}

#top-menu a:hover {
        color: #575757;
}

#top-menu li.active a {     
        color: white;
    position: relative;
    background: #4690d4;
}

#home {
    padding-left: 70px;
    padding-top: 150px;
        height: 800px;
    background-image: url(img/movingboxes.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Montserrat;
}

#services   {
    height: 1600px;
    }

#servicesleft   {
    float: left;
    height: 100%;
    width: 12%;
    }

#servicesmain   {
    float: left;
    height: 100%;
    width: 76%;
    }

#servicesright  {
    float: left;
    height: 100%;
    width: 12%;
    }


#moving {
        height: 800px;
    padding-top: 50px;
    padding-left: 12%;
    padding-right: 12%;
    background-image: url('img/cardboardbright.jpg');
    font-family: Montserrat;
}

#quote {
    height: 800px;
    background: grey;
}

#contact {
    height: 325px;
}

#contactleft    {
    float: left;
    height: 100%;
    width: 12%;
    background: white;
}

#contactmain    {
    float: left;
    height: 100%;
    width: 76%;
    background: white;
}

#contactright   {
    float: left;
    height: 100%;
    width: 12%;
    background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div id="header">

        <div id="navbar">
            <div id="logo">
                <img src="logosmall.png">
            </div>
                <ul id="top-menu">
                    <li class="active">
                            <a href="#home">Home</a>
                    </li>
                    <li>
                            <a href="#services">Services</a>
                    </li>
                    <li>
                            <a href="#moving">Moving Tips</a>
                    </li>
                    <li>
                            <a href="#quote">Get A Quote</a>
                    </li>
                    <li>
                            <a href="#contact">Contact Us</a>
                    </li>
                </ul>
        </div>
        </div>

        <div id="home">
            Content Here.
        </div>

        <div id="services">
        <div id="servicesleft"></div>
        <div id="servicesmain">
            <div id="movessec">
                Content Here.   
            </div>

            <div id="movessec">
                Content Here.   
            </div>

            <div id="movessec">
                Content Here.   
            </div>
        </div>
        <div id="servicesright"></div>
        </div>  


        <div id="moving">Content here.</div>    

        <div id="quote">Quote form goes here.</div>

        <div id="contact">
            <div id="contactleft">Content Here</div>
                <div id="contactmain">Content Here</div>
            <div id="contactright">Content Here</div>
        </div>


    </body>