jQuery的動畫滾動事件？

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}

這是完整的插圖，上下滾動以查看實際效果：

 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>