javascript - 滚动和 .addClass();问题

Question

我在一个“单页”网站上工作，该网站具有固定导航和一个文档中大约 5 个不同的页面。

更新的工作链接

http://www.coco-works.com/Archive/现场版

我在添加事件类时遇到问题。当您单击“保持联系”或“主页”时，不会应用该类。正如您从实时版本中看到的那样，它无法正常运行。

页面的工作原理是这样的；

这是 JavaScript；

$(document).ready(function() {
    $('body').click(function(event) {
        if (event.target.nodeName.toLowerCase() == 'a') {
            var op = $(event.target);
            var id = op.attr('href');
            if (id.indexOf('#') == 0) {
                $.scrollTo(id, 1000, {
                    offset: {
                        top: 75
                    },
                    axis: 'y',
                    onAfter: function() {
                        window.location.hash = id.split('#')[1];
                    }
                });
            }
            return false;
        }
    });
    $.fn.waypoint.defaults.offset = 75;
    $('.section h1.page_name').waypoint(function() {
        var id = this.id;
        var op = $('#navigation a[href = "#' + id + '"]');
        if (op.length) {
            $("#navigation a").removeClass("active");
            op.addClass('active');
        }
    });
});

我不是一个强大的程序员。我已尽我所能对其进行编辑，但我被卡住了。任何解决此问题的见解都将不胜感激。

仍在寻找答案，以下无法解决问题。

Answer 1

我不确定航路点插件在做什么，但我已经重构了您的代码并且它对我有用。请注意，我取消了对 .waypoints 的调用，并将您的 $('body').click() 处理程序更改为导航链接元素上更具体的处理程序。此处理程序将滚动到每个元素，然后在滚动完成时正确地执行类的删除和添加:

$(document).ready(function()
{

    function highlightNav(navElement){
        $("#navigation a").removeClass('active');
        navElement.addClass('active');
    }

    $('#navigation a').click(function(event){
        var nav = $(this);
        var id = nav.attr('href');
        $.scrollTo(id, 1000, {
            offset: { top: -75 },
            axis: 'y',
            onAfter: function(){
                highlightNav(nav);
            }
        });
        return false;
    });

    $(window).scroll(function(){
        if($(this).scrollTop() == 0){
            highlightNav($("#navigation a[href*='home']"));
        } 
    });


    $.fn.waypoint.defaults.offset = 75;
    $('.section h1.page_name').waypoint(function() {
        var id = this.id;
        var op = $('#navigation a[href = "#' + id + '"]');
        if (op.length) {
            highlightNav(op);
        }
    });


    // Fancybox
    $("a.zoom").fancybox({
        'overlayShow'    : false,
        'transitionIn'    : 'elastic',
        'transitionOut'    : 'elastic'
    });
    $("a.outside_shade").fancybox({
        'titlePosition'        : 'outside',
        'overlayColor'        : '#000',
        'overlayOpacity'    : 0.9
    });
    $("a.inside_white").fancybox({
        'titlePosition'    : 'inside'
    });
    $("a.inside_shade").fancybox({
        'titlePosition'    : 'over'
    });

    // validation
    $("form").validate();

    // nivo slider
    $('#slider').nivoSlider();
});

在 html 中，我向第一个链接添加了一个默认的事件类:

<div id="navigation">
    <ul>
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#who">Who Are We?</a></li>
        <li><a href="#service">Our Services</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#contact">Keep in Touch</a></li>
    </ul>
</div>

我还注意到在调用 reset.css 之前您在页面上定义了 css。这通常是不好的做法，您可能需要确保 reset.css 始终是第一个 css 文件拉入。它似乎并没有对页面产生太大影响，但有时您会得到奇怪的结果。

我在这里做了一个 jsfiddle 的结果:http://jsfiddle.net/RNsFw/2/

我认为不再需要航路点插件了。我没有更改 fancybox 或验证内容，因为我不确定它们在做什么，而且这并不是您问题的真正一部分。

我在 Firefox 和 Chrome 中测试过它。如果您有任何问题，请告诉我:)