Javascript 滚动和.addClass（）；问题

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

更新的工作链接

直播版

我在添加活动类时遇到问题。单击“保持联系”或“主页”时，将不应用该类。从实时版本中可以看出，它的功能不正常

页面的工作方式如下：；

这里是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');
        }
    });
});

我不是一个优秀的程序员。我试着尽我所能编辑它，我只是卡住了。如有任何关于解决此问题的见解，将不胜感激

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

这将删除对scrollTo和waypoints插件的依赖

 $('body').click(function(event)
         {
          if(event.target.nodeName.toLowerCase() == 'a')
          {
           var op = $(event.target);
           var id = op.attr('href');
           if(id.indexOf('#') == 0)
           {

            destination = $(id).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1000, function() {
                var hash = id.split('#')[1];
                window.location.hash = hash;
            });

           }
           return false;
          }
         });

          $(window).scroll(function (event){
            makeActive();
         });

         function makeActive(){
            var y = $(this).scrollTop();
            if(y!==0){
                $('.page_name').each(function(){
                    var curPos = parseInt($(this).offset().top - y);
                    if(curPos <= 0){
                        var op = $('#navigation a[href = "#'+$(this).attr('id')+'"]');

                        $("#navigation a").removeClass("active");
                        op.addClass('active');
                    }
                });
            }else{
                $("#navigation a").removeClass("active");
                $("#navigation a:first").addClass('active');
            }
         }

         makeActive();

$（'body'）。单击（函数（事件）
{
if（event.target.nodeName.toLowerCase（）=='a'）
{
var op=$（event.target）；
var id=op.attr（'href'）；
if（id.indexOf（'#'）==0）
{
destination=$（id）.offset（）.top；
$（“html:not（：animated），body:not（：animated）”）.animate（{scrollTop:destination}，1000，function（）{
var hash=id.split（“#”）[1]；
window.location.hash=散列；
});
}
返回false；
}
});
$（窗口）。滚动（功能（事件）{
makeActive（）；
});
函数makeActive（）{
var y=$（this.scrollTop（）；
如果（y！==0）{
$（'.page_name'）。每个（函数（）{
var curPos=parseInt（$（this）.offset（）.top-y）；
如果（curPos我不确定waypoints插件在做什么，但我已经重构了你的代码，它对我有效。请注意，我调用了.waypoints，并更改了你的$（'body'）。单击（）处理程序将是导航链接元素上更具体的处理程序。此处理程序将滚动到每个元素，然后在滚动完成时正确执行类的删除和添加：

$(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文件。它似乎对页面影响不大，但有时您会得到奇怪的结果

我在这里做了一些结果：

我想waypoints插件已经不再需要了。我没有改变fancybox或验证的东西，因为我不知道它们在做什么，这不是你的问题的一部分

我在firefox和Chrome中测试了它。如果您有问题，请告诉我：）
这可能完全无关，但我昨天遇到了类似的问题-在事件处理程序的回调中，jQuery操作没有在该范围内执行，但如果您将代码放入以下内容中：

setTimeout(function() {
    $(selector).addClass('foo');
}, 0);

如果调用
$（选择器）.stop（）.animate（）
函数（ish），而
队列
参数不为
false
，则其工作方式类似于
$.animate（）
函数（ish），例如：

$(selector).stop();
$(selector).animate({ foo }, { no queue:false here });
// ^ fail

$(selector).stop();
setTimeout(function() {
    $(selector).animate({ foo }, { no queue:false here either });
}, 0);
// ^ success

这个问题与上面的例子完全无关，尽管在行为/功能上类似，但最终证明是绑定方法——在我的例子中，我一直在使用
$.bind（）
——但后来我对它进行了重构，使用
$.delegate（）
（
$.live（）
）并按预期运行

同样，我也不确定这是否相关，但我想我会把它传递给大家以防万一。不确定这是一个bug还是我没有正确理解jQuery的一些更微妙的部分。
问题不在于js代码，而在于css/页面布局

或者，问题可能是您正在使用航路点插件，而您可能不想在该特定页面中使用该插件。（正如您将看到的，一旦您离开“主”航路点，您也会遇到问题，因为您使用的偏移量。）

问题是，只有当滚动到的目标元素位于浏览器窗口的顶部时，航路点插件才会触发，相对于偏移量，即“保持联系”将永远不会到达顶部，除非浏览器窗口足够小，“保持联系”部分占据整个浏览器窗口（减去偏移量）

您可以在此处看到它的可视化：

你能链接一些实时示例吗？另外：你不需要在
主体中绑定事件并查找
targetnode
元素。只需将一个公共类应用于菜单链接并将函数应用于它们。例如：
$（'a.my-menu'）。每个（function（）{//your function}）；
如果你添加了完整的html（基本），那么我就不必费心去创建所有元素，或者如果你添加了特定的代码，也许有一个精通谷歌Chrome10的人会帮你，你的代码会直接从“我们是谁？”跳到“保持联系”。是的，我们的服务和功能只是占位符。对于那些我刚刚使用OP标记的内容，正文中没有实际内容。@nzifnab你刚刚救了我的命！这太完美了，刚刚在最新版本的Chrome、FireFox、Safari for OS X和Windows 7中进行了测试。在IE7和IE8中也很好用。有一件事，有可能吗如果用户决定使用鼠标滚动，则活动类将应用？谢谢！哦！这就是您对航路点所做的操作，我现在明白了：p我重新添加了该部分，并确保它正常工作。是的。请参阅我更新的代码，我也更新了JSFIDLE链接。我在手动滚动到顶部时遇到问题，因此无法更新导航位置。这就是为什么我添加了特定的
$（窗口）。滚动该案例的事件处理程序。@nzifnab正在测试它。谢谢