Jquery 动画滚动事件

Jquery animate scroll event?

本文关键字：事件 滚动 动画 Jquery      更新时间：2023-09-26

我有这个代码

$(document).scroll(function() {
    var $window = $(window);
    var position = $window.scrollTop();
    if(position <= 2950){
        $(".lion_head").animate({right: "-100px"}, 2000);
    };
});

那么如果我从2950px滚动，.lion_head会从右-100px移动，我想要的是当我向下滚动，或者向上滚动，或者当我的滚动条不在2950px上时，我的.lion_head的位置移动到原来的位置？

谢谢。

尝试将代码包装在 $(window).on('scroll', function(e){ ... }); 中。

在事件函数旁边，执行动画逻辑。

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

有关更多详细信息，请参阅 jQuery.scroll。

使用纯 JavaScript 

var lionHead = document.querySelector(".lion_head");
window.addEventListener("scroll", function(event) {
    this.scrollY <= 2950 ? lionHead.classList.add('fixed') : lionHead.classList.remove('fixed')
}, false);

风格

.lion_head{transition:all .3s  ease}
.fixed{right: -100px}

这是完整的插图，上下滚动以查看它的实际效果：

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>

相关文章：