Question

嗨朋友我正在单页网站上工作。我想当用户滚动和任何文本部分到达前0时，相应的链接将变为红色

您可以查看 fiddle here 或查看我的代码

SCRIPT

$( 'html, body' ).scroll(function() {
    var windscroll = $(this).scrollTop();

    $('.section').each(function(i) {
            if ($(this).position().top <= windscroll) {

                $('.nav li.active').removeClass('active');
                $('.nav li:nth-child('+i+')').addClass('active');
            }else {


        $('.nav li.active').removeClass('active');
        $('.nav li:first').addClass('active');
    }
        });


})

Answer 1

尝试使用此Jquery插件突出显示滚动页面内容的标题。您可以找到更多类似的插件

http://www.jqueryscript.net/menu/Navigation-Menu-Highlighting-Plugin-visualNav.html

如果您想自己处理突出显示，请使用Jquery waypoint插件

http://imakewebthings.com/jquery-waypoints/

Answer 2

解决方案：查看工作演示http://jsfiddle.net/mcdmys3z/1/

你做错了，下面是对逻辑的解释：

1）你在html / body上附加了scroll事件但是它不起作用，滚动事件被触发了DOM对象，比如文档/窗口/元素等，同时注意到将事件附加到DOM对象如document /窗口不会将它们包装在像$（'window'）这样的字符串中，因为它不起作用，正确的方法是$（窗口）。

2）突出显示链接的逻辑不正确

（i）当用户滚动时，你必须检查是否（sectionTop＆gt; = scrollTop），即当用户滚动到某个部分的顶部然后突出显示其链接时。在这一点上，部分的标题是触及顶部标题底部。

（ii）此外，你必须考虑部分内容高度，当用户向下滚动到部分内容时，我必须检查是否（sectionTop + sectionHeight）＆gt; = scrollTop然后继续突出显示其链接。这意味着滚动尚未传递/移动到下一部分标题的顶部，仍然可以看到当前部分内容。

（iii）现在滚动传递到下一个标题顶部，即下一个标题顶部触及顶部标题底部，然后上一个突出显示条件变为假，现在下一个标题链接突出显示

3）你还必须考虑顶部标题高度，从$（this）.position（）。top中减去标题高度，因为你的内容隐藏在粘性标题后面。因此，您的案例中的逻辑顶部是顶部页眉底部而不是页面顶部。

您的部分内容属于部分组合，是故意的吗？

  $(window).scroll(function () {
        var windscroll = $(this).scrollTop();
        $('.section').each(function (i) {
            if (($(this).position().top - 92) >= windscroll || ($(this).position().top - 92 + $(this).height()) >= windscroll) {
                $('.nav li.active').removeClass('active');
                $('.nav li:nth-child(' + (i + 1) + ')').addClass('active');
                return false; // To break Jquery each loop
            } else { // I don't think this is needed
                //$('.nav li.active').removeClass('active');
                // $('.nav li:first').addClass('active');
            }
        });
    })

每个都没有在导航链接上工作

2 个答案: