Question

我有这段代码

$(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的位置移动到原来的位置？

感谢。

Answer 1

尝试将代码包装在$(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。

Answer 2

使用纯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}

以下是完整插图，向上和向下滚动以查看其实际效果：

＆＃13;

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

＆＃13;

:root{height: 4000px}
.lion_head{
    width: 150px;
    height: 150px;
    background: orange;
    position: fixed;
    top: 60px;
    right: 80vw;
    transition:all .3s  ease
}
.fixed{right: -100px}

＆＃13;

<div class=lion_head></div>

＆＃13;

Jquery动画滚动事件？

2 个答案: