jquery 滚动和.addClass();议题

hrirmatl  于 2022-12-18  发布在  jQuery
关注(0)|答案(4)|浏览(199)

我正在一个“一页”的网站与固定的导航和大约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');
        }
    });
});

我不是一个很强的程序员。我已经尽我所能编辑它,但我只是卡住了。任何解决这个问题的见解将不胜感激。
仍在寻找答案,下面无法修复该问题。

3gtaxfhh

3gtaxfhh1#

我不知道waypoints插件在做什么,但是我已经重构了你的代码,它对我来说是有效的。注意,我去掉了对.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文件。它似乎没有对页面产生太大影响,但有时你会得到奇怪的结果。
我在这里对结果做了一个简单的处理:http://jsfiddle.net/RNsFw/2/
我认为这个插件不再需要了。我没有修改fancybox或者验证的东西,因为我不确定它们在做什么,这也不是你的问题。
我在Firefox和Chrome中测试过,有问题就告诉我:)

mccptt67

mccptt672#

http://jsfiddle.net/vCgy8/9/
这将删除对scrollTo和航点插件的依赖性。

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

eiee3dmh3#

这可能是完全不相关的,但我昨天遇到了类似的问题-在事件处理程序的回调中,jQuery操作不在该范围内执行,但如果您将代码放入以下内容:

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

它将工作-类似于$.animate()如何工作(ish),如果您调用$(selector).stop().animate()queue参数不为false,例如:

$(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的一些微妙部分。

zsohkypk

zsohkypk4#

问题不在于你的js代码,而在于你的css/页面布局。
或者问题可能是你正在使用航点插件,而你可能不想在这个特定的页面上使用(正如你将看到的,一旦你离开它,你也很难再次点击“主页”航点,因为你使用的偏移量。)
问题是,直到你滚动到的目标元素位于浏览器窗口的最顶端时,导航点插件才会触发。“保持联系”永远不会到达顶端,除非你的浏览器窗口足够小,以至于“保持联系”部分占据了整个浏览器窗口(减去偏移量)。
您可以在这里看到它的可视化效果:

相关问题