Question

当我滚动到第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);
}

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

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

Answer 2

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

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

Answer 3

不确定这是否是您想要的，但您可以使用此功能将类添加到当前查看的每个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')

JS：滚动到时将焦点效果应用于元素

3 个答案: