Волшебная линия не обновляется с fullPage.js при перемещении вверх и вниз с помощью клавиатуры

0

Я объединил прокрутку полной страницы Альваро Триго, https://github.com/alvarotrigo/fullPage.js и навигацию Magic Line от Криса Койера, http://css-tricks.com/jquery-magicline-navigation/. Почти полностью его работала, за исключением случаев, когда вы прокручиваете вверх и вниз с помощью клавиш со стрелками, он обновляет активную ссылку, но Magic Line не обновляет ее. Так близко...

Вот сценарий js: http://jsfiddle.net/X5juR/

и вот пример кода для Magic Line

Всем спасибо!

    $(function() {
        var $el, leftPos, newWidth,
            $mainNav = $("#menu");

            /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
        $mainNav.append("<li id='magic-line'></li>");

             /* Cache it */
        var $magicLine = $("#magic-line");

        $magicLine
            .width($(".active").width())
            .css("left", $(".active a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());

        $("#menu li:not('#magic-line') a").hover(function() {
            $el = $(this).parent();
            leftPos = $el.position().left;
            newWidth = $el.width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        },function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        }).click(function() {
             $mainNav.find('li').removeClass('active');
             $(this).parent().addClass('active');
             $magicLine
                .data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width());
        });
        /* Kick IE into gear */
        $(".active a").mouseenter();


});
Теги:
fullpage.js

1 ответ

1
Лучший ответ

Magicline не должен работать таким образом. Вам нужно будет закодировать его самостоятельно...

В любом случае, посмотрите на этот живой пример: http://jsfiddle.net/X5juR/1/

Я преобразовал функцию anonymouse в функцию magicLine() а затем использовал afterRender вызовы afterRender и afterLoad для работы с меню:

// inline script in the head tag
$(document).ready(function () {
    var pepe = $.fn.fullpage({
        anchors: ['link1', 'link2', 'link3', 'link4', 'link5'],
        menu: '#menu',
        afterRender: function () {
            magicLine();
        },
        afterLoad: function (anchorLink, index) {
            var magicLine = $("#magic-line");
            var current = $('#menu').find('li').eq(index-1).find('a');
            var el = current.parent();
            var leftPos = el.position().left;
            var newWidth = el.width();
            magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }
    });

});
  • 0
    Спасибо Альваро! Ты жжешь!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню