上一篇: jquery – 发布JSON ajax请求,co... 下一篇:如何：在mouseOver / mouseOut上...

jquery – 在基于当前视图使用scrollto时突出显示活动链接

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 在基于当前视图使用scrollto时突出显示活动链接，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个网页,它是一个页面,用户使用使用scrollto jquery 插件的链接导航到每个部分.

我的问题是：我想在主菜单中显示活动链接.因此,如果您滚动到联系表单,则突出显示联系人链接.现在,我可以通过在单击后添加类来在jquery中执行此操作.如果这样做,如果用户要手动滚动到另一个部分,联系人链接仍然是活动的,这将是不正确和误导.

所以我的想法是以某种方式解决当前正在查看哪个div id.我真的不明白怎么做.有任何想法吗？

解决方法

这应该适用于您添加手动滚动覆盖：

$(function(){
    var sections = {},_height  = $(window).height(),i        = 0;

    // Grab positions of our sections 
    $('.section').each(function(){
        sections[this.name] = $(this).offset().top;
    });

    $(document).scroll(function(){
        var pos = $(this).scrollTop();

        // Look in the sections object and see if any section is viewable on the screen. 
        // If two are viewable,the lower one will be the active one. 
        for(i in sections){
            if(sections[i] > pos && sections[i] < pos + _height){
                $('a').removeClass('active');
                $('#nav_' + i).addClass('active');
            }  
        }
    });
});