Question

以下是我的想法：

将项目列为导航左侧滚动的黑色边框
列表项

点击

滚动到<div>

很难解释（我是法国人）所以试试吧： http://mathieualbore.com/traci/

当你从smilio点击时它起作用＆gt;如果从skiply开始并单击＆gt;则跳过但不起作用; smilio

代码：

$("#smilio").waypoint({
    handler: function(event, direction) {   
    left = $('.menu li[data-target="#smilio"]').position().left;
    w = $('.menu li[data-target="#smilio"] span').width();
    $('.active').stop().animate({ left: left, width: w+40 })    
},
offset: 40
});

$("#skiply").waypoint({
    handler: 
    function(event, direction) {
    left = $('.menu li[data-target="#skiply"]').position().left;
    w = $('.menu li[data-target="#skiply"] span').width();
    $('.active').stop().animate({ left: left, width: w+40 })
},
offset: 40
});

和

$(".menu li").click(function() {
 var target = $(this).data("target");
 var scrollY = $(target).position().top;
 $("html, body").animate({ scrollTop: scrollY-40 }, 500);
}

Answer 1

如果有人有兴趣，我会找到办法解决问题

$(".menu li, a").click(function() {
var target = $(this).data("target");
var scrollY = $(target).position().top;
$("html, body").animate({ 

scrollTop: scrollY-40

}, 500, function() {

left = $('.menu li[data-target="'+target+'"]').position().left;
w = $('.menu li[data-target="'+target+'"]').width();    
$('.active').stop().animate({
    left: left,
    width: w+40
})

});
});

Answer 2

这是为了简化航点：

$(".menu li").each(function() {
var target = $(this).data("target");

$(target).waypoint({
    handler: function(event, direction) {   
    left = $('.menu li[data-target="'+target+'"]').position().left;
    w = $('.menu li[data-target="'+target+'"]').width();
    $('.active').stop().animate({ left: left, width: w+40 })
    },

    offset: 40

  });

  });

Jquery - 航点 - 动画导航

2 个答案: