如何使链接在底部滚动时处于活动状态

Question

我有一个单页布局，我需要让我的“联系我们”部分突出显示（即突出显示导航栏链接背景为蓝色），就像我的其他链接在单击并滚动到时所做的那样。

我想最简单的方法是在页面滚动到底部时使其处于活动状态。我尝试在我的 javascript 中添加一些东西，但没有奏效。

编辑：

我快到了，我已经在我的 jQuery 中添加了这段代码，并在我的 HTML a href 中添加了两个类元素，但是现在当我向上滚动时，“获取报价”在我滚动过去之前不会突出显示/激活然后它回落。有什么建议吗？

更改的 HTML

            <li class="quoteive">
                    <a href="#quote">Get A Quote</a>
            </li>
            <li class="contactive">
                    <a href="#contact">Contact Us</a>
            </li>

添加代码

$(window).on("scroll", function() {
        var scrollHeight = $(document).height();
        var scrollPosition = $(window).height() + $(window).scrollTop();
            if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
                    $(".contactive").addClass('active');
                $(".quoteive").removeClass('active');
            }

            else    {
                $(".contactive").removeClass('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"),
                    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

通过Relative 位置有简单的css解决方案，带有负顶部和填充固定。

---

#contact {
  z-index: -1;
  position: relative;
  top: -200px;
  padding-top: 200px;
}

现在#contact 容器更早启动，内容显示在同一位置。

---

注意：您可以更改px 编号并获得自己的结果，并且不要忘记降低z-index 容器。

示例：

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 {
    z-index: -1;
    height: 325px;
    position: relative;
    top: -200px;
    padding-top: 200px;
}

#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>

编辑：

检查一下这个js，我认为它运行良好。

$(window).scroll(function(){

    var scrollPosition = $(window).scrollTop();

    //get the page height
        var pageHeight = $('body').outerHeight();

    //get the window height
    var windowHeight = $(window).innerHeight();

    $('.quoteive').each(function(){
                    var parent = $(this).parent(),
            target = $(this).children('a').attr('href'),
            targetPosition = $(target).offset().top - 100,
            targetHeight = $(target).outerHeight();

        if (scrollPosition > targetPosition && scrollPosition < targetPosition + targetHeight) {
            $(this).addClass('active');
        } else if (pageHeight - windowHeight <= scrollPosition) {
                $(parent).children().removeClass('active');
                $(parent).children().last().addClass('active');
        } else {
            $(this).removeClass('active');
        }
    })

})

这是你的 HTML 代码：

        <ul id="top-menu">
            <li class="quoteive">
                    <a href="#home">Home</a>
            </li>
            <li class="quoteive">
                    <a href="#services">Services</a>
            </li>
            <li class="quoteive">
                    <a href="#moving">Moving Tips</a>
            </li>
            <li class="quoteive">
                    <a href="#quote">Get A Quote</a>
            </li>
            <li class="quoteive">
                    <a href="#contact">Contact Us</a>
            </li>
        </ul>

如果你要在页面底部之前获取开关，只需更改此行：

else if (pageHeight - windowHeight <= scrollPosition)

到这一行（你可以写下你的选择）：

else if (pageHeight - windowHeight <= scrollPosition + 100)

Working fiddle