简体   繁体   中英

toggle the css class to selected/unselected on scroll jquery

I want to add the class "selected" to a[href] when the particular DIV comes while scrolling. And remove that class when DIV scrolled completely. This code is adding the class but after completely scrolled, The a[href] is not focusing out.

var aChildren = $(".cd-faq-categories li a"); // 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);
}

$(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("selected");
    } else {
        if ($("a[href='#cld9']"))
        {
            //...
        }
        else
        {
            $("a[href='" + theID + "']").removeClass("selected");
        }
    }
}
if (windowPos + windowHeight == docHeight) {
    alert("gfg");
    if (!$(".cd-faq-categories li a").hasClass("selected")) {
        var navActiveCurrent = $("li").attr("href");
        $("a[href='" + navActiveCurrent + "']").removeClass("selected");
        $("li a").addClass("selected");
    }
}
});

What is the correct way to write it?

 } else {
        if ($("a[href='#cld9']"))
        {
            //...
        }
        else
    {
        $("a[href='" + theID + "']").removeClass("selected");
    }
}

I'm thinking you probably want the last line to run for all the other ids, you need to do

} else if ($("a[href='#cld9']")) {
            //...
} else {
            $("a[href='" + theID + "']").removeClass("selected");
}

instead

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM