Change navigation active class on window scroll

Question

i want to create a scroll effect like here http://www.strikingly.com/s/pages/default-ion?demo=ion#1 All i need for this moment is to change navigation li class active when

Answer 1

Well...not sure if you're still looking for an answer to your question, but I can contribute a suggestion...

As mentioned, you could use the scrollTop() method to determine what section is presently in the viewport. Here's a quick function I threw together to determine this, it may not be optimized (I'm not a jQuery expert, sorry), but it seems to work, and should at least put you on the right path to a solution:

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

This function basically takes the href of each menu anchor element, and uses it to find the

(or any other element, if you like) with a matching id in the document. After this, it checks to see whether the top of that

is above or at the current scroll position, and its bottom is still below the current scroll position. (Those two conditions being true means that this

is the one currently highest in the viewport, and so should be considered the active section.) The class .active is then removed/added accordingly. Of course, you can just add/subtract values if you want to offset when a section is considered "active".

Maybe it's easier just showing what it does, so here's an updated JSFiddle with this function implemented. It's initially bound using $(document).on("scroll") - however, note that I also unbound it from the scroll event using $(document).off("scroll") while the smooth scrolling occurs, so that the section doesn't change until you've reached the destination section (if you click on one of the menu links). After the smooth scrolling occurs, I bind the function again to the scroll event.

Anyways, I hope this is what you were looking for! If it's not, let me know and I'll be happy to help further. (Or I'll try, at least - since as I mentioned, jQuery isn't really my specialty...) Good luck!

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...