Я объединил прокрутку полной страницы Альваро Триго, 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();
});
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
});
}
});
});