根据当前视图使用滚动到时突出显示活动链接 [英] Highlight active link when using scrollto based on current view

问题描述

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

I have a website which is one page and the user navigates to each section using links which uses the scrollto jquery plugin.

我的问题是:我想在主菜单中显示活动链接.因此，如果滚动到联系人表单，则联系人链接将突出显示.现在，我可以在jquery中通过单击后添加类来做到这一点.如果这样做的话，如果用户要手动滚动到另一部分，则联系人链接仍将处于活动状态，这将是不正确的并且具有误导性.

My problem is: I want to show the active link in the main menu. So if you scroll to the contact form the contact link is highlighted. Now I could do this in jquery by adding the class after clicking. If done like that if a user was to manually scroll to another section the contact link would still be active, which would be incorrect and misleading.

所以我的想法是要以某种方式找出当前正在查看的div ID.我真的不太明白该怎么做.有任何想法吗?

So my thoughts would be to somehow work out which div id is currently in view. I don't really understand how to do that though. Any ideas?

推荐答案

这应该可以为您添加手动滚动覆盖:

This should work for you to add the manual scrolling override:

$(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');
            }  
        }
    });
});

演示: http://jsfiddle.net/x3V6Y/

这篇关于根据当前视图使用滚动到时突出显示活动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！