Прокрутка и .addClass ();проблемы

Question

Я работаю над «одностраничным» веб-сайтом с фиксированной навигацией и около 5 разных страниц внутри одного документа.

ОБНОВЛЕННАЯ РАБОЧАЯ ССЫЛКА

http://www.coco -works.com / Архив / ЖИВАЯ ВЕРСИЯ

У меня проблемы с добавлением активного класса. При нажатии кнопки «Оставаться на связи» или «Домой» класс не применяется. Как видно из живой версии, она не работает должным образом.

Страница работает примерно так;

А вот и 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, но я реорганизовал ваш код, и он работает для меня.Обратите внимание, что я снял вызов .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>

Также я заметил, что на странице вы определили свой css до , когда вызывается reset.css. Обычно это плохая практика, вы можете захотеть убедиться, что reset.css всегдаизвлечен первый файл css. Похоже, что он не сильно повлиял на страницу, но иногда вы получите странные результаты, делая это.

Я сделал jsfiddle результатов здесь: http://jsfiddle.net/RNsFw/2/

плагин waypoints больше не нужен, я думаю.Я не менял fancybox или средства проверки, потому что я не уверен, что они делают, и это не было частью вашей проблемы.

Я протестировал его в Firefox и Chrome.Дайте мне знать, если у вас есть вопросы:)

Answer 2

Проблема не в вашем коде js, а в вашем макете css / page.

Или, возможно, проблема в том, что вы используете плагин waypoint, и вам может не понадобиться эта страница. (Как вы увидите, у вас также возникают проблемы с повторным достижением путевой точки «Домой» после того, как вы ее оставили, из-за смещения, которое вы используете.)

Дело в том, что плагин waypoint не сработает, пока целевой элемент, на который вы прокручиваете, не окажется в самом верху окна браузера относительно смещения, которое есть. «Оставайтесь на связи» никогда не дойдут до вершины, если окно вашего браузера не будет достаточно маленьким, чтобы раздел «поддерживать связь» занимал все окно браузера (за вычетом смещения).

Вы можете увидеть это здесь:

Answer 3

Это может быть совершенно не связано, но у меня вчера была похожая проблема - когда при обратном вызове обработчика событий операции jQuery не выполнялись в этой области, но если вы бросили код в нечто вроде:

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

это будет работать - подобно тому, как $.animate() функционирует (иш), если вы вызываете $(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() будет работать также), и он функционировал как ожидалось.

Опять же, не уверен, что это связано, но решил, что я передам это на всякий случай. Не уверен, что это ошибка или просто я неправильно понимаю некоторые тонкие части jQuery.

Answer 4

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();