[英]Jquery animate scroll event?
I have this code 我有这个代码
$(document).scroll(function() {
var $window = $(window);
var position = $window.scrollTop();
if(position <= 2950){
$(".lion_head").animate({right: "-100px"}, 2000);
};
});
So if I scroll from 2950px
the .lion_head
will move -100px
from right, What I want is when I scroll down, or scroll up, or when my scroll bar is not on 2950px
, The position of my .lion_head
moves to its original position? 所以,如果我从滚动
2950px
的.lion_head
将移动-100px
右,当我向下滚动,或向上滚动,或者当我的滚动条是不是我要的是2950px
,我的位置.lion_head
移动到原来的位置?
thanks. 谢谢。
Try wrapping your code inside $(window).on('scroll', function(e){ ... });
尝试将代码包装在
$(window).on('scroll', function(e){ ... });
. 。
In side the event function, do your animation logic. 在事件功能旁边,执行动画逻辑。
$(window).on('scroll', function(e){
var position = $(window).scrollTop();
if(position <= 2950){
$(".lion_head").animate({right: "-100px"}, 2000);
}
else{
$(".lion_head").animate({right: "0"}, 2000);
}
});
See jQuery.scroll for more details. 有关更多详细信息,请参见jQuery.scroll 。
Use pure javascript 使用纯JavaScript
var lionHead = document.querySelector(".lion_head");
window.addEventListener("scroll", function(event) {
this.scrollY <= 2950 ? lionHead.classList.add('fixed') : lionHead.classList.remove('fixed')
}, false);
The Style 样式
.lion_head{transition:all .3s ease}
.fixed{right: -100px}
Here is the full illustration, scroll up and down to see it in action: 这是完整的插图,上下滚动以查看实际效果:
var lionHead = document.querySelector(".lion_head"); window.addEventListener("scroll", function(event) { this.scrollY <= 2950 ? lionHead.classList.add('fixed') : lionHead.classList.remove('fixed') }, false);
:root{height: 4000px} .lion_head{ width: 150px; height: 150px; background: orange; position: fixed; top: 60px; right: 80vw; transition:all .3s ease } .fixed{right: -100px}
<div class=lion_head></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.