Question

我有一个单页面布局，我需要让我的“联系我们”部分突出显示活动（即突出显示导航栏链接背景蓝色），因为我点击其他链接并滚动到该链接。

我想最简单的方法是在页面滚动到底部时激活它。我已经尝试在我的javascript中添加一些内容，但它没有用。

修改

我几乎在那里我已经将这段代码添加到我的jQuery中并在我的HTML中添加了两个类元素a href，但是现在当我向上滚动“Get A Quote”时我不会突出显示/激活直到我滚动过去它然后退下来。有什么建议吗？

更改了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容器。

示例：

如何在底部滚动

1 个答案: