我制作了一个顶部菜单,按钮下方有一个小箭头。 我希望此箭头相应地移动到我的一页设计中滚动条所在的位置。
我想我已经掌握了基础知识...但是不知何故,当我尝试为箭头设置动画时(而不是让它在按钮之间跳转),它就会不停地翻转。我想这与多个 >=... 有关,但我想不出替代方案。谁能给我一些建议?
效果可以看这里:http://www.lightwavedesign.nl/
我使用的JS如下:
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top-78},'1000');
};
window.onload = function() {
var link1 = $("#Welkom"); var positionLink1 = link1.position();
var link2 = $("#OverMij"); var positionLink2 = link2.position();
var link3 = $("#Portfolio"); var positionLink3 = link3.position();
var link4 = $("#Contact"); var positionLink4 = link4.position();
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {return window.pageYOffset;}
var d = document.documentElement;
if (d.clientHeight) {return d.scrollTop;}
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('menuAanwijzer'),
scroll = getScrollTop();
if (scroll <= positionLink2.top) {$('#menuAanwijzer').animate({left: '665px'}, 100)}
if (scroll >= positionLink2.top-80) {$('#menuAanwijzer').animate({left: '760px'}, 100)}
if (scroll >= positionLink3.top-80) {$('#menuAanwijzer').animate({left: '860px'}, 100)}
if (scroll >= positionLink4.top-80) {$('#menuAanwijzer').animate({left: '960px'}, 100)}
if (scroll >= positionLink2.top-80) {$('#menuTitel').fadeIn('500');}
if (scroll <= positionLink2.top-80) {$('#menuTitel').fadeOut('500');}
};
};
最佳答案
很简单,使用 .stop()
清除动画队列
.stop().animate()
if (scroll <= positionLink2.top) {$('#menuAanwijzer').stop().animate({left: '665px'}, 100)}
if (scroll >= positionLink2.top-80) {$('#menuAanwijzer').stop().animate({left: '760px'}, 100)}
if (scroll >= positionLink3.top-80) {$('#menuAanwijzer').stop().animate({left: '860px'}, 100)}
if (scroll >= positionLink4.top-80) {$('#menuAanwijzer').stop().animate({left: '960px'}, 100)}
if (scroll >= positionLink2.top-80) {$('#menuTitel').stop().fadeIn('500');}
if (scroll <= positionLink2.top-80) {$('#menuTitel').stop().fadeOut('500');}
关于jquery - 菜单指针通过滚动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13629622/