javascript - JS：滚动到元素时对元素应用焦点效果

Question

这是小提琴：http: //jsfiddle.net/fz5Yk/5/

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

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

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

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);
}

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

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

Answer 2

不确定这是否正是您想要的，但您可以使用strong它为当前视图中的每个添加一个类：

$(document).scroll(function(){
    var t = $(this).scrollTop();
    var b = t + $(this).height();
    $('.section>strong').removeClass('highlight').filter(function(){
        var ot = $(this).position().top;
        return ot > t && ot < b;
    }).addClass('highlight');
});

http://jsfiddle.net/fz5Yk/7/

但这在我看来有点毫无意义，因为当它不在视野中时，为什么要删除突出显示？反正也看不出来！？

如果您真的只想要第 3 节的功能，您可以更改$('.section>strong')为$('#section-3>strong')

Answer 3

在您的点击操作中有这样的内容：

$("#container .section strong").css('background-color', 'transparent');
$("#container .section strong:contains('" + $(this).text() + "')").css('background-color', 'yellow');