javascript - JS : Applying focus effect on an element when scrolled to

Question

这是 fiddle :http://jsfiddle.net/fz5Yk/5/

我想要实现的是当我滚动到第 3 节时突出显示(例如添加背景颜色)第 3 节的标题(在 <strong> </strong> 标记中)。

我想知道是否有办法让我在某个部分时触发某些事件。这一定是有原因的，因为当您手动滚动页面时，您会注意到，在导航菜单中，指向该部分的链接会自动被选中，就好像它被点击了一样。

任何有用的东西都将不胜感激，因为我从昨天开始就一直在研究这个问题，但还没有解决它。

Answer 1

没有任何方法可以使用 CSS 实现此目的，因此我编辑了 jquery.nav.min.js。 (仅添加 4 行)现在效果很好。 http://jsfiddle.net/fz5Yk/10/

adjustNav=function(a,b,d){
                var sec = a.find("."+d+">a").attr("href");
                $(sec+">strong").css('background','none'); //Find and remove previous highlight of strong  
                a.find("."+d).removeClass(d);b.addClass(d); //ORIGINAL

                sec = b.find("a").attr("href");
                $(sec+">strong").css('background','aqua'); //Find and highlight the strong
};

编辑:按要求添加的动画: http://jsfiddle.net/fz5Yk/11/

在顶部添加animateSomething 函数:

function animateSomething(sec) {
    if(sec == "#section-2")
        $("#testBlock").animate({
            width:"50%",
            opacity:0.5
        }, 1500);
}

在 adjustNav 函数的末尾添加 animateSomething(sec);。
瞧!

编辑最后:滚动结束后动画 http://jsfiddle.net/fz5Yk/12/