Question

我有一个带有导航栏的单页面布局，可以更改滚动位置上的活动类。我有一个问题，当我滚动到联系人部分时它不会选择“联系我们”导航栏链接但是我通过添加代码来修复它，当用户滚动到页面底部时激活联系我们链接。

现在的问题是，现在“Get A Quote”链接在我到达页面底部之后才会激活，直到我向上滚动然后再向下滚动。

即。一切都很好滚动每个div，链接根据滚动活动。到达页面底部“联系我们”激活。 向上滚动到'quote'div，但“Get A Quote”不会激活。滚动浏览它，所有其他工作，向下滚动，“获取报价”再次激活。

这是我的完整代码

的Javascript

<script type='text/javascript'>//<![CDATA[
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");
   }
});

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(".contactive").addClass('active');
        $('a[href="#quote"]').parent('li').parent('li').removeClass('active');
    }
    else    {
        $(".contactive").removeClass('active');
    }
});
}//]]>
</script>

HTML

<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 class="contactive">
                            <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

你正在为＆＃34;引用＃34;做一个特例。通过删除它的＆＃34;活动＆＃34;当你点击页面底部时（为了使联系我们表单处于活动状态，即使滚动高度没有达到它，也不能上课，因为它是页面的结尾）。

但是，如果高度不在底部，则您不能再次激活该部分。即你忘了做与原始特例相反的事情。

实际上，你可以稍微简化一下代码并减少特殊情况（不依赖于＆＃34;引用＆＃34;是倒数第二项）：

// 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) {
        menuItems.parent().removeClass('active');
        lastId = id;
    }

    //special case for "contact us" section at bottom of page
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        menuItems.parent().removeClass("active");
        $(".contactive").addClass('active');
    }
    else {
        $(".contactive").removeClass('active');
        $("[href='#"+id+"']").parent().addClass('active');
    }
});

从特定的href中删除活动类

1 个答案: