菜单指针通过滚动动画(Menu pointer animate by scroll)
我做了一个顶级菜单，按钮上有一个小箭头。 我想让这个箭头移动到我的单页设计上滚动的位置。
我认为我已经掌握了基础知识......但是一旦我尝试为箭头设置动画（而不是让它在按钮之间跳转），它就会不知所措。 我想这与倍数> = ...有关但我想不出另类。 有人可以给我一些建议吗？
效果可以在这里看到： 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');} }; };I have made an top menu with underneith the buttons a little arrow. I want this arrow to move correspoing to where the scroll is on my one page design.
I think i got the basics working... but somehow it keeps flippin around as soon as i try to animate the arrow (instead of making it jump between buttons). I guess it has something to do with the multiple >=... but i can't think of an alternative. Can anyone please give me some advice?
The effect can be seen here: http://www.lightwavedesign.nl/
The JS i am using is as follow:
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（）。动画（）
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');}Simple, clear your animation queue using .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');}更多推荐
发布评论