Question

我在一个有效的单页滚动网站上使用此代码，但我已将整个网址添加到href中，例如“href =”index.php #home“而不是仅使用哈希。现在我的活动状态不起作用。如何修改此代码以使其起作用？

                //Navigation Scroll / Highlight
            var aChildren = $(".nav li.link").children();
            var aArray = [];
            for (var i=0; i < aChildren.length; i++) {    
                var aChild = aChildren[i];
                var ahref = $(aChild).attr('href');
                aArray.push(ahref);
            }

            $(window).scroll(function(){
                var windowPos = $(window).scrollTop() + 140; // get the offset of the window from the top of page
                var windowHeight = $(window).height(); // get the height of the window
                var docHeight = $(document).height();

                for (var i=0; i < aArray.length; i++) {
                    var theID = aArray[i];
                    var divPos = $(theID).offset().top; // get the offset of the div from the top of page
                    var divHeight = $(theID).height(); // get the height of the div in question
                    if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                        $("a[href='" + theID + "']").addClass("nav-active");
                    } else {
                        $("a[href='" + theID + "']").removeClass("nav-active");
                    }
                }

                if((windowPos + windowHeight) >= (docHeight - 140)) {
                    if (!$(".nav li.link:nth-last-child(2) a").hasClass("nav-active")) {
                        var navActiveCurrent = $(".nav-active").attr("href");
                        $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
                        $(".nav li.link:nth-last-child(2) a").addClass("nav-active");
                    }
                }
            });

Answer 1

$(document).ready(function(){

/** 
 * This part does the "fixed navigation after scroll" functionality
 * We use the jQuery function scroll() to recalculate our variables as the 
 * page is scrolled/
 */
$(window).scroll(function(){
    var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
    var div_top = $('#nav-anchor').offset().top;
        if (window_top > div_top) {
            $('nav').addClass('stick');
        } else {
            $('nav').removeClass('stick');
        }
});

/**
 * This part causes smooth scrolling using scrollto.js
 * We target all a tags inside the nav, and apply the scrollto.js to it.
 */
$("nav a").click(function(evn){
    evn.preventDefault();
    $('html,body').scrollTo(this.hash, this.hash); 
});

/**
 * This part handles the highlighting functionality.
 * We use the scroll functionality again, some array creation and 
 * manipulation, class adding and class removing, and conditional testing
 */
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {    
    var aChild = aChildren[i];
    var ahref = $(aChild).attr('href');
    aArray.push(ahref);
} // this for loop fills the aArray with attribute href values

$(window).scroll(function(){
    var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
    var windowHeight = $(window).height(); // get the height of the window
    var docHeight = $(document).height();

    for (var i=0; i < aArray.length; i++) {
        var theID = aArray[i];
        var divPos = $(theID).offset().top; // get the offset of the div from the top of page
        var divHeight = $(theID).height(); // get the height of the div in question
        if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
            $("a[href='" + theID + "']").addClass("nav-active");
        } else {
            $("a[href='" + theID + "']").removeClass("nav-active");
        }
    }

    if(windowPos + windowHeight == docHeight) {
        if (!$("nav li:last-child a").hasClass("nav-active")) {
            var navActiveCurrent = $(".nav-active").attr("href");
            $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
            $("nav li:last-child a").addClass("nav-active");
        }
    }
});

}）;

导航滚动突出显示

1 个答案: