Одностраничный сайт, использующий Mootools Scroll + jQuery для выделения ссылок привязки Nav?

Question

Хорошо, я на расстоянии 2 дюймов от решения моей проблемы, и теперь я не уверен, что делать дальше.

Сайт разработчика: http://www.kendraschaefer.com/meilin

Я использую Mootools и jQuery на одной странице для создания одностраничного сайта.Mootools обрабатывает прокрутку страницы - прокрутка страницы вверх и вниз в пределах указанного div.

Jquery обрабатывает все остальные эффекты.

Проблема в панели навигации - я пытаюсь выделить элементы навигации, основываясь на том, какой div в настоящее время активен.

Наконец-то я остановился на следующем решении, прежде чем понял, что оно его не совсем обрезает:

• MooTools обрабатывает прокрутку
• Jquery назначает «текущий» класс любомуэлемент навигации, по которому щелкнули, и удаляет «текущий» класс из любого другого элемента навигации.

Проблема: теперь я не могу создавать внутристраничные ссылки, потому что внутристраничные ссылки не перехватываютсядо нави в любом случае.Например, на «домашней» странице попробуйте нажать кнопки «работа» или «команда» в области содержимого - соответствующие элементы навигации не выбраны, и я не знаю, как заставить это работать.

Может быть, я должен добавить назначение класса через Mootools после того, как прокрутка вступит в силу?(Если вы знаете, как, пожалуйста, поделитесь!)

Или, может быть, я должен изменить Jquery?

Любые решения приветствуются!Спасибо!

Answer 1

var scroll = new Fx.Scroll('contentouter', {
    duration: 1000,
    wait: false,
    offset: {
        'x': -200,
        'y': -40
    },
    onStart: function() {
        // do it here str after click and before scroll
        $$("a.current").removeClass("current");
        if (this.triggerEl)
            this.triggerEl.addClass("current");
    },
    onComplete: function() {
        // or have it here after the scroll is done

    },
    transition: Fx.Transitions.Quad.easeInOut
});

var scrollableLinks = $$("a").filter(function(link) {
    var href = link.getProperty("href");
    return href && href.contains("#") && href.replace("#", '').length;
});

scrollableLinks.each(function(el) {
    el.addEvents({
        click: function(e) {
            new Event(e).stop();
            scroll.triggerEl = this;
            scroll.toElement(this.getProperty("href").replace("#", ''));
        }
    });
});

scrollableLinks работает с вашей текущей разметкой для извлечения всех ссылок на страницы, которые имеют href и содержат #, и это не просто #

в более поздних версиях, таких как 1.2, 1.3, вы могли бы просто применить егоко всем ссылочным ссылкам, например, так:

document.getElements("a[href~=#]")

другой способ - создать простой класс nav, и если вы хотите, чтобы ссылки действовали как навигационные, просто сделайте <a href="#about" class="nav">about us</a> - выполнение универсального универсального подхода может затруднить использование регулярных якорей.

обновленный пример: http://www.jsfiddle.net/dimitar/WkTzr/6/, где изображение TEAM в первом контейнере является ссылкой, которая дублирует ссылку верхнего меню.