Jquery - 航点 - 动画导航

Jquery - waypoints - animate nav

本文关键字：导航 动画 航点 Jquery      更新时间：2023-09-26

这是我的想法：

  • 列表项在导航
    上滚动后出现黑色边框
  • 列表项

单击时滚动到<div>

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

当您从 smilio> skiply 单击时它可以工作，但如果从 skiply 开始并单击> 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);
}

如果有人感兴趣，我会找到一种方法来解决问题

$(".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
})
});
});

这是为了简化航点：

$(".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
  });
  });
相关文章：